Using HTML5 to develop Android (1)---Multi-resolution problems with Android devices

Android Browser default preview mode browsing will be reduced to the original size in the page WebView

Android Browser and webview default to MDPI. hdpi equivalent to mdpi 1.5 times times ldpi equivalent to 0.75 times times

Three solutions: 1 viewport attribute 2 CSS control 3 JS control

1 viewport attributes are placed in the <meta> of HTML

HTML code

<span style= "Font-size:x-small" >   
The attributes of viewport in Meta are as follows
HTML code
<span style= "Font-size:x-small" >   <meta name= "viewport"          content= "               height = [Pixel_value | Device-height],               width = [Pixel_value | device-width],               initial-scale = float_value,               minimum-scale = Float_v Alue,               Maximum-scale = float_value,               user-scalable = [yes | no],               target-densitydpi = [Dpi_value | device-dpi |               high-dpi | medium-dpi | LOW-DPI]           "       /></span>  
2 CSS Control device density
Create a separate style sheet for each density (note that the webkit-device-pixel-ratio 3 values correspond to 3 resolutions)
HTML code
<link rel= "stylesheet" media= "screen and (-webkit-device-pixel-ratio:1.5)" href= "Hdpi.css"/> <link rel=  "Stylesheet" media= "screen and (-webkit-device-pixel-ratio:1.0)" href= "Mdpi.css"/> <link  rel= "stylesheet" Media= "screen and (-webkit-device-pixel-ratio:0.75)" href= "Ldpi.css"/>  
In a style sheet, specify a different style
HTML code
#header {     <span style= "White-space:pre" ></SPAN> 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);        }    }  
HTML code
<meta name= "viewport" content= "target-densitydpi=device-dpi, Width=device-width"/>  
3 JS Control
Android Browser and WebView support querying DOM features of the current set density
Window.devicepixelratio has 3 values (0.75,1,1.5 corresponds to 3 resolutions)
The method of querying device density in JS
JS Code
if (Window.devicepixelratio = = 1.5) {       alert ("This was a high-density screen");   } else if (window.devicepixelration = = 0.75) {       alert ("This was a low-density screen");   }  
Using HTML5 to develop Android (1)---Multi-resolution problems with Android devices