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