以iPhone5为例子： 设备分辨率为1136*640 dp → （1136^2+640^2)开根号除以4 英寸屏幕 算得 等于326ppi → 326ppi 属于 Retina屏幕，dpr=2 → 1px = dpr^2 * dp （这是1个像素正方形由4个dp组成）→ 所以 iPhone5 的屏幕为320*568px 

<meta name = 'viewport'  content='name=value,name=value'>   例如：<meta name = 'viewport'  content = 'width=320' > 设置布局viewport为320像素 但是不能设置一个固定值，所以：设置'width=device-width' 布局viewport始终等于设备宽度 

[list][*]width:设置布局viewport的特定值（”device-width“）

[*]initial-scale:设置页面的初始缩放

[*]minimum-scale:最少缩放

[*]maximum-scale:最大缩放

[*]user-scalable:用户能否缩放

[/list]但是当页面元素尺寸改变时，例如div的宽度从320px 变成 360 px 那么他们的document.body.clientWidth = 320; window.innerWidth = 360；这样会影响我们的设计布局，所以需要设置initial-scale=1；这样页面的缩放比都控制了 这样我们的布局viewport和度量viewport都相等了

所以移动Web最佳viewport设置为：布局viewport = 设备宽度 = 度量viewport   →   （<meta name = 'viewport'  content='width=device-width,initial-scale=1,user-scalable=no'>）

设计移动Web

方案一：根据设备的实际宽度来设计（常用）

手机宽320px，我们就拿320px设计

方案二：1px = 1dp 

缩放0.5。根据设备的物理像素dp等于抽象像素px来设计。1像素边框和高清图片都不需要额外处理。