A few suggestions on how to fit different screens in Web app

Android devices vary greatly in screen size and pixel density, so you need to take this into account when loading Web pages with WebView, and carefully design our web pages to be properly displayed on different screens. In general, we need to consider two factors:
1. Viewport (viewport)
The so-called viewport refers to the rectangular area where the Web page is drawn. Viewport has many properties that we can set, such as the size of the viewport and the initial scale. One of the most important is to specify the width of the viewport, which is the total number of horizontal pixels (that is, the number of CSS pixels) that the Web page exhibits.
2. Screen density
WebView and most browsers on Android convert the CSS pixel values of the Web page to dip values (that is, device-independent pixels), typically based on a medium-density screen size (about 160dpi size). If there is a higher requirement for image display, you need to focus on the ratio of different screen densities, because a 300px wide image will be magnified on the 320dpi screen (each CSS pixel will use more physical pixels), which will make the image blurry and jagged.
Dip Conversion: dip (value) = (int) (PX (value)/1.5 + 0.5).

The dpi (dot per inch), pixels per inch, reflects the sharpness of the screen, such as 120dpi,160dpi, assuming the QVGA (320*240) Resolution of the screen physical size is (2 inches * 1.5 inches), then dpi=160.

Setting of the Viewport property
Our pages are drawn in the area specified in viewport. Although the total viewable area of viewport is consistent with the screen size when we minimize the Web page, viewport also has its own pixel range properties for the Web page to control. For example, for screen sizes with a physical width of 480 pixels, the width of the viewport can reach 800 pixels, so that when the viewport scale is set to 1.0, the Web page can be designed to be completely displayed on the screen based on the 800 pixel width. Most browsers on Android will default to a larger viewport (commonly referred to as "wide viewport mode" with a width of about 980px). Many browsers will also default to minimize the size of the Web page to fully display the width of the viewport (called "overlook Mode"). It is important to note that the WebView default does not enable wide viewport mode, and if it is to be enabled, call the Setusewideviewport () method.
In the Web page, we can set the viewport width and the initial scale by the label. The following lists the properties supported by viewport and the value type of each property:

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"] "/>

The above example specifies that the width of the viewport is the width of the device screen, and the zoom operation is not supported.

In general, we will set the width of the viewport to "device-width" so that it can be displayed consistently on all screens, and then use CSS's media query mechanism to flexibly layout to fit different screen sizes. It is important to note that we can only remove the support for zooming when we make sure that our page layouts are flexible and that the content of the Web page adapts to the width of the small screen.

Set the screen density for different devices with CSS styles
The Android browser and WebView provide support for creating CSS styles that match the specified screen density by parsing the CSS media feature "-webkit-device-pixel-ratio". The value of "-webkit-device-pixel-ratio" is "0.75", "1" and "1.5", respectively, for low-density, medium-density and high-density 3 kinds of screens. For example, the following code creates a CSS style file for a high-density and medium-density screen, respectively:

or set different styles for different screen densities in a CSS style file:

#header {   background:url (medium-density-image.png);} @media screen and (-webkit-device-pixel-ratio:1.5) {/  * CSS for high-density screens */  #header {    background : URL (high-density-image.png);}  } @media screen and (-webkit-device-pixel-ratio:0.75) {/  * CSS for low-density screens */  #header {    background : URL (low-density-image.png);}  }

For more information on how to work with images to fit different screen densities, refer to the http://www.html5rocks.com/en/mobile/high-dpi/article.
Setting the screen density of different devices with JavaScript scripts
The Android browser and WebView provide a DOM property window.devicepixelratio to get the screen density of the device on which the current page resides. The value of Window.devicepixelratio is the same as the value of "-webkit-device-pixel-ratio" mentioned earlier, which are "0.75", "1" and "1.5", respectively, corresponding to low density, medium density and high density 3 kinds of screens. If the value of Window.devicepixelratio is "1.0", the target device's screen is medium density, so the Web page does not have any scaling by default, and if the Window.devicepixelratio value is "1.5", the target device's screen is high density, Then the page will be enlarged by default to 1.5 times times the original, if the value of Window.devicepixelratio is "0.75", the target device's screen is low density, then the page default will be reduced to the original 0.75. The following code demonstrates how to use this property to query the device's screen density:

if (Window.devicepixelratio = = 1.5) {  alert ("This was a high-density screen");} else if (Window.devicepixelratio = = 0.7 5) {  alert ("This was a low-density screen");}

A few suggestions on how to fit different screens in Web app