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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.