在移动端开发中viewport算是基础知识，之前对viewport一直一知半解，通过这个笔记希望能加深对viewport的理解。
一、viewport (视口)
在PC端上，viewport仅表示浏览器的可视区域。
视觉视口 visual viewport
移动端下的visual viewport 与PC端的viewport类似，表示浏览器的可视区域，一般移动端的浏览器默认为全屏状态，所以visual viewport也可以认为是手机屏幕的大小
布局视口 layout viewport
layout viewport主要用于css布局计算，例如默认为布局视口的宽度，该宽度明显大于手机屏幕宽度，这样可以确保移动端显示的网站布局与PC端浏览器上一样。 每个浏览器定义的layout viewport宽度都有所不同，Safari iPhone使用980px，Opera 850px，Android WebKit 800px和IE 974px。
layout viewport 的缺陷
上面提到由于早期许多页面并没有做移动端优化，在移动设备上渲染时布局会乱掉，所以浏览器厂商就推出了layout viewport让未做移动端优化的网站在窄屏设备上看起来更舒服。
但是对于使用媒体查询针对窄屏幕做了优化的页面不太友好，比如layout viewport宽980px, 那么在 640px 或 480px 或更小宽度要起作用的媒体查询就不会触发了，浪费了这些响应式设计。
起先，为了缓解这个问题，Apple 在 Safari iOS 中引入了“viewport meta标签”让Web开发人员控制视口的大小和比例。由于Web开发人员开始大量使用它，因此其他移动浏览器也实现了它。由于通过meta viewport能够让开发人员自由的控制layout viewport, 因此我们就得到了一个我们自己理想中的视口，PPK大神称之为 ideal viewport
理想视口 ideal viewport
和layout viewport一样，理想视口也是针对移动端的视口概念，因为meta viewport只在移动端生效。理想视口不是固定，是开发人员针对特定场景认为该场景下最适合的视口宽度，因为现在大多数网站都会做移动端优化，所以目前普遍认为移动端理想视口是：layout viewport的宽度 = visual viewport的宽度，这样用户不用缩放和横向拖动网页就能很好的进行网页浏览。
<!-- width代表layout viewport的宽度，将其设置为设备屏幕宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
