Android手机上关于viewport的理解
一．Android默认的viewport（即网页未设置viewport元标签的时候）（windows.innerWidth）
在网页未加载完成时，值为320，一旦页面加载完成，该值会发生改变，android_2.x的值为800，android_4.x的值为980，用以适配一般的web网页。
二．Android的手机分辨率的获取
使用window.screen获取，虽然window.screen不是w3c标准，但是绝大部分浏览器均支持。
经测试，在android2.2和2.3上的自带浏览器，该值（window.screen.width和window.screen.height）获取的是错误的，和浏览器的viewport的宽高一样（有人认为这是android2.2和2.3的bug，链接如下：https://code.google.com/p/android/issues/detail?id=12455），在android2.1和4.0以上的系统，均显示正确的分辨率。
三．设备像素比（window.devicePixelRatio）
一般window.devicePixelRatio的值为0.75，1，1.5，2，2.25，3等。苹果规定window.devicePixelRatio的值为1或2，来区分普通屏幕和视网膜屏，但是谷歌拓展该定义，用以适配更多的尺寸的屏幕。
四．viewport元标签
主要讲width和target-densitydpi两个属性：
1. width
设置viewport的宽度，iphone下有效(iphone读取后自动计算target-densitydpi)，android_4.0以上有效（若不设置target-densitydpi；设置target-densitydpi后，则以target-densitydpi为准）
2. target-densitydpi
Android浏览器所需要的，因为Android硬件设备标准不一， 其中同样物理尺寸的屏幕，可能因为dpi的不同而具有不同的分辨率。
target-densitydpi可以设定的值（device-dpi|指定的具体的dpi的值），target-densitydpi有三个常量：high-dpi（240），medium-dpi（160），low-dpi（120），分别对应分辨率为480*800，320*480，240*320。
具体计算公式：
target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160
（应用的公式原理是设备的宽度的物理像素的计算）
案例：
如果设置viewport为
此时，如果需要将320px的图片无缩放的铺满网页的宽度，可以将target-densitydpi的值通过js按上述公式计算后重新设置即可。（注:Android2.2和2.3上无法正确设置，原因见第二条，设备的分辨率宽度获取不正确，可以采取medium-dpi这个默认值）。
总结
1.若手机网页需要定死宽度，比如320或480等，需要设置viewport的target-densitydpi，最好是根据上条公式计算出（若是Android2.2和2.3，则可以给出默认值medium-dpi），可以适配绝大多数的手机网页，包括720p和1080p等（除非是Android2.2或2.3系统的手机，且分辨率又是比较奇葩的（不是320，480等），这样的手机毕竟很少，如果需要完美适配页面宽度，只能根据ua通过服务器查询该机型的分辨率，然后计算）
2.手机页面不要使用绝对宽度，可以通过百分比设置，一方面以防出现viewport设置不正确（1中的例外情况）后，页面变形；另一方面方便以后修改（只需修改viewport中的参数即可）
3.若手机网页需要按照设备宽度，设置viewport的target-densitydpi为device-dpi，页面可采用响应式布局，或media queries等技术。
本文链接：http://wanglery.iteye.com/blog/1926747
更多相关文章
- Android(安卓)单页面 音乐播放器和电影播放
- TextVview的属性
- Android深入讲解WebView——下
- Android登陆页面软键盘弹起避免遮挡按钮实现
- Android——ViewPager和Fragment混合使用（含源码下载）
- 深入讲解WebView——下
- [置顶] Android屏幕适配全攻略(最权威的官方适配指导)
- Android程序开发基础之——页面布局
- android 对话框方式弹出实现