移动端 设计与开发经验之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-size或zoom缩放一倍，图片在高清晰屏上就不会模糊。在加载页面时通过读取设备的width去计算dpi然后动态生成meta标记，可以很好解决手机的分辨率适配问题。但是在android pad端上不适用，原因有二，一、pad对width是计算还是读取比较混乱，有些像ios，有些读dpi，还有的两个都读，然后分段比较。二、pad的高中低dpi分档和手机不一样，没有统一标准