- 手机屏幕相对着桌面浏览器小，传统网页的设计在手机上体验糟糕
Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话)，用于创建一个虚拟窗口（layout viewport），这个虚拟窗口的分辨率接近于桌面显示器，Apple 将其定义为980px。然后将虚拟窗口映射到移动设备的屏幕上，按比例缩放并重新渲染网页。
虚拟窗口（layout viewport）
- 把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为 layout viewport。
宽度可通过 Js 获取(基本所有设备都支持)
视觉窗口（visual viewport）
- 浏览器可视区域大小。可理解为手机物理屏幕。
宽度可通过 Js 获取(不支持Android2, Opera Mini, UC8)
window.innerWidth
window.innerHeight
ideal viewport
- 由Peter-Paul Koch提出的一种概念，一个完美适配移动设备的 viewport。理想状态是不需要用户缩放和横向滚动条就能正常查看，显示的文字大小合适，不区分分辨率，屏幕密度等。
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
meta viewport
- 移动端默认使用的是 layout viewport ，而我们想要达到类似 ideal viewport 的效果的话，可以通过 meta 标签来对 viewport 进行控制。
width=device-width
因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。
设备像素比 = 设备像素/设备独立像素
设备独立像素 = 设备像素/设备像素比
独立设备像素 就是 css 中的px 独立于设备的用于逻辑上衡量像素的单位。
