layout viewport、visual viewport 和 ideal viewport 的区别？
如果把移动设备上浏览器的可视区域设为 viewport 的话，某些网站就会因为 viewport 太窄而显示错乱，所以这些浏览器就决定默认情况下把 viewport 设为一个较宽的值，比如 980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk 把这个浏览器默认的 viewport 叫做 layout viewport。
layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个 viewport 来代表浏览器可视区域的大小，ppk 把这个 viewport 叫做 visual viewport。
ideal viewport 是最适合移动设备的 viewport，ideal viewport 的宽度等于移动设备的屏幕宽度。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美地呈现给用户。
viewport 的大小为 ideal viewport，可以如下设置：
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
三种 viewport 的详细解释
- layout viewport（布局视口）：移动端浏览器为页面布局设置的视口，一般宽度为 980px，因此 PC 端页面在移动端可以通过拖动和缩放来查看完整布局。
- visual viewport（视觉视口）：用户当前可见的视口大小，一般为屏幕的分辨率。visual viewport 就像"窗户"，layout viewport 就像外面的风景。
- ideal viewport（理想视口）：让 layout viewport 等于设备独立像素，无需缩放与滚动就能完美展示页面。可以通过设置
<meta name="viewport" content="width=device-width, initial-scale=1">让浏览器进入 ideal viewport 模式。
补充：移动端必须理解的 viewport 概念，是解决"1px 问题"、"高清图适配"、"rem 适配"等所有移动端布局问题的前置知识；常见 viewport meta 属性：
width=device-width：布局视口宽度 = 设备独立像素；initial-scale：初始缩放比例；maximum-scale/minimum-scale：用户最大/最小缩放比例；user-scalable：是否允许用户手动缩放（一般设为 no 防止误触）。
