Viewport解决分辨率适配问题

Viewport :字面意思为视图窗口,在移动 web 开发中使用。表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致。
基本写法:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=medium-dpi">
测试获取 viewport width
document.documentElement.clientWidth
1、在 iphone 上是读取 device-width 的值,并自动计算出 target-densitydpi 去适配,在 iphone4 上读取的值为 320 
最终的计算公式为:
initial-scale=1 时:
ViewportWidth=width 
initial-scale !=1 时:
ViewportWidth=width  >  320 / initial-scale ? Width : 320 / initial-scale ;
ViewportWidth 不超过 1280 ,大于取 1280 
2、在 android 上,读取的是 target-densitydpi  。在不设置的情况下,默认选择的是 medium-dpi(160)  。以下讨论均在中屏幕大小的手机上范围内:
Dpi 的分级与其对应的代表分辨率:
Low-dpi:240*320 (基本淘汰,暂不讨论)
Medium-dpi:320*480
High-dpi:480*800
Super high-dpi:640*960   其对应的 dpi 120 160 240 320 
实验一:对 480*800 设置 dpi medium-dpi ,其 viewport 320 ;设为 high-dpi  ,其 viewport 480 ;设为 device-dpi  ,其 viewport 480
实验二:对 540*800 设置 medium-dpi viewport 360 ;设为 high-dpi  ,其 viewport 540 ;设为 device-dpi  ,其 viewport 540 ;设为 low-dpi  ,其 viewport 270
总结:从上面两个实验可得出:
当设备为 high-dpi 设备时,设置为中分辨率的 viewportwidth 为( 2/3 *device-width ;设置为 low-dpi 时,为( 1/2 *device-width 。这个比例和其 dpi 的比例是一致的, 2/3=160/240 1/2=120/240
推测 dpi 的值与 viewportwidth 存在一元关系。
①假设我要做一个 android high-dpi 设备应用,虚拟的 viewportwidth 定死为 320px
device-width=x ,( 2/3 *x 为该设备设为 medium-dpi viewportwidth 的值, x/240 表示一个 dpi 值代表多少个 px
Target-densitydpi=160 - { 2/3 *x-320}/(x/240);
简化一下: Target-densitydpi=320*240/x
实验三:在 540 手机上设置 Target-densitydpi=142 ,其 viewport 320 
根据以上公式可以计算出 Target-densitydpi=142.222222 ,与上面测试数据一致。
②假设我要做一个 android super-high-dpi 设备应用,虚拟的 viewportwidth 定死为 320px
Target-densitydpi=320*320/x
此公式未进行试用期验证。
③假设我要做一个 android medium-dpi 设备应用,虚拟的 viewportwidth 定死为 320px
Target-densitydpi=160 - {x-320}/(x/160);
Target-densitydpi=320*160/x
实验成功
④假设我要做一个 android low-dpi 设备应用,虚拟的 viewportwidth 定死为 320px
Target-densitydpi=160 - { 4/3 x-320}/(x/120);
Target-densitydpi=320*120/x
此公式未进行试用期验证。
特例: htcA510E :在 width 设有具体值时,会读取 width ,忽略 dpi
联想 K1 pad  不读取 dpi ,只读取 width ,而且当 width 小于等于 320 的时候忽视,直接取 device-width
3、htc input 缩放问题。当 viewport 的值大于 device-width 时,会出现 input 获取焦点放大。所以在设计中选择基于 320 分辨率( 240 设备淘汰不讨论),出图基于 640 ,图片 0.5 缩放保证清晰度。

总结,在开发时最好基于320宽进行开发,图片基于640做,在放置图片时可以用background-sizezoom缩放一倍,图片在高清晰屏上就不会模糊。在加载页面时通过读取设备的width去计算dpi然后动态生成meta标记,可以很好解决手机的分辨率适配问题。但是在android pad端上不适用,原因有二,一、padwidth是计算还是读取比较混乱,有些像ios,有些读dpi,还有的两个都读,然后分段比较。二、pad的高中低dpi分档和手机不一样,没有统一标准

首发地址:http://www.appmobicn.com/thread-307-1-1.html

你可能感兴趣的:(viewport,Viewport分辨率适配)