以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][*]设置布局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像素边框和高清图片都不需要额外处理。