手机端的视口

1.layout viewport（布局视口）

一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口）

width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。

2.visual viewport（视觉视口）和物理像素

物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。

iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208

3.ideal viewport（理想视口）通常是我们说的屏幕分辨率。不可改变

而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值，比如，iPhone的屏幕分辨率：

iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x
iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
iPhone6 Plus ：分辨率 414 *  736，物理像素1242 * 2208，@3x

---

1.dip （设备逻辑像素）

跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

2.CSS像素

CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。

http://www.css88.com/archives/5975