文本内容:
使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度,过程实在很麻烦,最后的解决办法是使用cssmediaquery同时匹配分辨率和屏幕密度,在每个设备上进行兼容性测试,最终保证在多数Android平板上都能较好的显示一个典型的针对设备的CssMediaQuery写法如下,可以保证页面高度充满屏幕简单的设置height100%是不行的[css]viewplaincopyI//SAMSUNGN5100Nexus71@mediaonlyscreenandmin-device-height:790pxandmax-device-height:810pxand-webkit-min-device-pixel-ratio:
1.3and-webkit-max-device-pixel-ratio:
1.4andorientation:landscape{.nav-itempadding:$nav-item-iconSize+123px3px0;:beforetop:12px;}bodyheight:601px;.category-content.category-content-2{.category-listpadding:10px10px;.list-itemmargin:10px15px;}下面是适配时收集的各种平板的分辨率数据,仔细研究还是能发现不少问题的,可以看出如果分辨率是1280*800屏幕密度是
1.33125那么对应CSS中的高度应该是
600.99px底部虚拟按键占48px有了这些数据就可以做屏幕适配了三星N5100平板,android
4.407-1511:12:
56.316:E/metrics.density23926:DisplayMetricsdensity=
1.33125width=1280height=800scaledDensity=
1.7306249xdpi=
189.02325ydpi=
188.14815}07-1511:16:
33.296:l/WebConsole25284:devicePixelRatio=
1.3312499523162842screen.width=1280screen.height=800window.outerWidthl280:79三星GT-511007-2210:06:
13.662:E/metrics.density3438:DisplayMetricsdensity=
1.0width=1280height=752scaledDensity=
1.0xdpi=
149.82489ydpi=
149.4117607-2210:06:
17.037:l/WebConsole3438:devicePixe旧atio=1screen.width=1280screen.height=800window.outerWidthl280:89华为Mediapad10fhd07-2212:12:
34.501:E/metrics.density29949:DisplayMetrics{density=
1.5width=1920height=1128scaledDensity=
1.9499999xdpi=
224.73732ydpi=
224.11765}07-2212:12:
36.824:l/WebConsole29949:devicePixe旧atio=
1.5screen.width=1920screen.height=1200window.outerWidthl920atfile:///android_asset/www/js/app.js:89联想S510007-2214:07:
45.107:E/metrics.density2541:DisplayMetricsdensity=
1.3312501width=1280height=736scaledDensity=
1.3312501xdpi=
213.0ydpi=
213.0}华为X107-2313:41:
30.180:E/metrics.density13387:DisplayMetricsdensity=
2.0width=1824height=1200scaledDensity=
2.0xdpi=
324.255ydpi=
322.96607-2313:41:
32.870:l/WebConsole13387:devicePixe旧atio=2screen.width=1200screen.height=1920window.outerWidthl824atfile:///android_asset/www/js/app.js:89。