Adapts to Android tablet screen resolution and screen pixel density with CSS3 Media query technology

Using HTML5 in developing mobile applications to meet a variety of needs Android resolution and screen of tablet device density, which is a very cumbersome process, the ultimate solution is to use CSS Media query, matching the same time resolution and screen pixel density. On the compatibility test, and finally ensure that on most Android tablets can be better displayed.

A typical device-specific CSS Media query notation is as follows. can guarantee the page height fills the screen, the simple setting height:100% is not possible.

SAMSUNG N5100, NEXUS7 1, @media only Screenand (min-device-height:790px) and (max-device-height:810px) and (-webkit-min -device-pixel-ratio:1.3) and (-webkit-max-device-pixel-ratio:1.4) and (Orientation:landscape) {  . nav-item{    padding: $nav-item-iconsize + 3px 3px 0;    &:before{      top:12px;    }  }  body{    height:601px;  }  . Category-content,  . category-content-2,{    . category-list{      padding:10px 10px;      . list-item{        margin:10px 15px;}}}  

The following is the adaptation of the various flat-panel resolution data collected, detailed research or can find a lot of problems, can see the hypothetical resolution is 1280*800, screen density is 1.33125. Then the height of the corresponding CSS should be 600.99px. The bottom virtual button occupies 48px. With this data you can do a screen fit.

Samsung N5100 Tablet, android4.4

07-15 11:12:56.316:e/metrics.density (23926): displaymetrics{density=1.33125, width=1280, height=800, scaledDensity= 1.7306249, xdpi=189.02325, ydpi=188.14815}

07-15 11:16:33.296:i/web Console (25284): devicepixelratio= 1.3312499523162842 screen.width=1280 screen.height=800 window.outerwidth1280:79

Samsung GT-5110

07-22 10:06:13.662:e/metrics.density (3438): displaymetrics{density=1.0, width=1280, height=752, scaledDensity=1.0, xdpi=149.82489, ydpi=149.41176}

07-22 10:06:17.037:i/web Console (3438): devicepixelratio= 1 screen.width=1280 screen.height=800 window.outerWidth1280 : 89

Huawei Media Pad-FHD

07-22 12:12:34.501:e/metrics.density (29949): displaymetrics{density=1.5, width=1920, height=1128, scaledDensity= 1.9499999, xdpi=224.73732, ydpi=224.11765}

07-22 12:12:36.824:i/web Console (29949): devicepixelratio= 1.5 screen.width=1920 screen.height=1200 window.outerwidth1920 at file:///android_asset/www/js/app.js:89

Lenovo S5100

07-22 14:07:45.107:e/metrics.density (2541): displaymetrics{density=1.3312501, width=1280, height=736, scaledDensity =1.3312501, xdpi=213.0, ydpi=213.0}

Huawei X1

07-23 13:41:30.180:e/metrics.density (13387): displaymetrics{density=2.0, width=1824, height=1200, scaledDensity=2.0 , xdpi=324.255, ydpi=322.966}

07-23 13:41:32.870:i/web Console (13387): devicepixelratio= 2 screen.width=1200 screen.height=1920 window.outerwidth1824 at file:///android_asset/www/js/app.js:89

Copyright notice: This article Bo Master original article, reproduced please keep source Http://blog.csdn.net/offbye

Adapts to Android tablet screen resolution and screen pixel density with CSS3 Media query technology