Targeting Screens from Web Apps. Because Android is available on devices with a variety of screen sizes and pixel densities, you should account for these factors in your web design so your web pages always appear at the appropriate size. When targeting your web pages for Android devices, there are two major factors that you should account for: The viewport The viewport is the rectangular area that provides a drawable region for your web page. You can specify several viewport properties, such as its size and initial scale. The screen density The WebView class and most web browsers on Android convert your CSS pixel values to density-independent pixel values, so your web page appears at the same perceivable size as a medium-density screen (about 160dpi).
Specifying Viewport Properties The viewport is the area in which your web page is drawn. You can define properties of the viewport for your web page, such as the width and initial zoom level, using the <meta name="viewport" ... > tag in your document <head>. Best Practices for Web Apps. Developing web pages and web applications for mobile devices presents a different set of challenges compared to developing a web page for the typical desktop web browser. To help you get started, the following is a list of practices you should follow in order to provide the most effective web application for Android and other mobile devices.
Redirect mobile devices to a dedicated mobile version of your web site There are several ways you can redirect requests to the mobile version of your web site, using server-side redirects. Most often, this is done by "sniffing" the User Agent string provided by the web browser. To determine whether to serve a mobile version of your site, you should simply look for the "mobile" string in the User Agent, which matches a wide variety of mobile devices. If necessary, you can also identify the specific operating system in the User Agent string (such as "Android 2.1"). Debugging Web Apps. If you are testing your web app with a device running Android 4.4 or higher, you can remotely debug your web pages in WebView with Chrome Developer Tools, while continuing to support older versions of Android. For more information, see Remote Debugging on Android. If you don't have a device running Android 4.4 or higher, you can debug your JavaScript using the console JavaScript APIs and view the output messages to logcat.
If you're familiar with debugging web pages with Firebug or Web Inspector, then you're probably familiar with using console (such as console.log()). Android's WebKit framework supports most of the same APIs, so you can receive logs from your web page when debugging in Android's Browser or in your own WebView. Using Console APIs in the Android Browser Logcat Logcat is a tool that dumps a log of system messages. To run logcat and view messages, execute adb logcat from your Android SDK tools/ directory, or, from DDMS, select Device > Run logcat. Console.log("Hello World"); Building Web Apps in WebView. Web Apps Overview.
Figure 1. You can make your web content available to users in two ways: in a traditional web browser and in an Android application, by including a WebView in the layout. There are essentially two ways to deliver an application on Android: as a client-side application (developed using the Android SDK and installed on user devices in an APK) or as a web application (developed using web standards and accessed through a web browser—there's nothing to install on user devices).
If you chose to provide a web-based app for Android-powered devices, you can rest assured that major web browsers for Android (and the WebView framework) allow you to specify viewport and style properties that make your web pages appear at the proper size and scale on all screen configurations. Figure 1 illustrates how you can provide access to your web pages from either a web browser or your your own Android app.
However, you shouldn't develop an Android app simply as a means to view your web site.