android-Supporting Different Screens in 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 screen density

Note: When your page is rendered in a WebView, it does not use wide viewport mode (the page appears at full zoom) by default. You can enable wide viewport mode with setUseWideViewPort().

The following syntax shows all of the supported viewport properties and the types of values accepted by each one:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

Note:  You should disable user scaling only when you're certain that your web page layout is flexible and the content will fit the width of small screens.

The Android Browser and WebView support a DOM property that allows you to query the density of the current device—the window.devicePixelRatio DOM property. The value of this property specifies the scaling factor used for the current device

For example, here's how you can query the device density with JavaScript:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}