使用CSS3-Media-Query技术适配Android平板屏幕分辨率和屏幕密度.docx

使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度，过程 实在很麻烦，最后的解决办法是使用css media query,同时匹配分辨率和屏幕密度，在每 个设备上进行兼容性测试，最终保证在多数Android平板上都能较好的显示。
一个典型的针对设备的Css Media Query写法如下，可以保证页面高度充满屏幕, 简单的设置height： 100%是不行的。
[css] view plain copy I
1. //SAMSUNG N5100, Nexus7 1,
2. @media only screen
3. and (min-device-height : 790px)
4. and (max-device-height : 810px)
5. and (-webkit-min-device-pixel-ratio: 1.3)
6. and (-webkit-max-device-pixel-ratio: 1.4)
7. and (orientation : landscape) {
8. .nav-item(
9. padding: $nav-item-iconSize + 12 3px 3px 0;
10. &:before(
11. top: 12px;
12. }
13. )
14. body(
15. height: 601px;
16. )
17. .category-content,
18. .category-content-2,{
19. .category-list(
20. padding: 10px 10px;
21. .list-item(
22. margin: 10px 15px;
23. }
24. )
25. )
26. )下面是适配时收集的各种平板的分辨率数据，仔细研究还是能发现不少问题的，可以看出如 果分辨率是1280*800,屏幕密度是1.33125,那么对应CSS中的高度应该是600.99px,底部 虚拟按键占48px,有了这些数据就可以做屏幕适配了。
三星 N5100 平板，android4.407-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}
三星 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: l/Web Console(3438): devicePixe旧atio= 1 screen.width=1280screen.height=800 window.outerWidthl280:89
华为 Media pad 10 fhd07-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: l/Web Console(29949): devicePixe旧atio= 1.5 screen.width=1920
screen.height=1200 window.outerWidthl 920 at file:///android_asset/www/js/app.js:89联想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}华为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: l/Web Console(13387): devicePixe旧atio= 2 screen.width=1200
screen.height=1920 window.outerWidthl 824 at file:///android_asset/www/js/app.js:89