背景
很早很早的时候，开发者设计网页，往往只考虑到PC上的浏览器。后来有了智能手机，屏幕突然变小了很多，如何在手机浏览器上正确显示这些PC网页呢？
网页还是要按照原来的大小和位置进行排版，不然会破坏原有页面的结构。为此苹果引入了viewport的概念。viewport俗称视口，用来描述一块区域，浏览器可以在这块区域上去排版、渲染网页。前面说了，默认情况下，这块区域的大小要和PC非常接近才能不破坏页面结构，所以Apple选了一个值，宽980px，慢慢大家都采取了这个值。
你可以理解成，浏览器默认情况下，会有一个viewport，它可能比手机屏幕大很多，浏览器就在它上面去排版网页。之后浏览器有两个选择：
- 排版完成之后，缩放到手机屏幕那么大小，这样会模糊一些。
- 给网页加上一个滚动条，让用户自己滚去吧。
什么是viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制viewport的大小和缩放，其他手机浏览器也基本支持。
常见情况
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
- 它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。
layout viewport
上面提到的虚拟视口就是layout viewport
visual viewport
有了layout viewport，我们还需要一个视口用来承载它，这个视口可以简单的认为是手持设备物理屏幕的可视区域，很明显，visual viewport的尺寸不会是一个固定的值，甚至每款设备都可能不同。
以iPhone4S为例，会在其320px的visual viewport上，创建一个宽980px的layout viewport，于是用户可以在visual viewport中拖动或者缩放网页，来获得良好的浏览效果；
ideal viewport
我们还需要一个视口，它类似于布局视口，但宽度和视觉视口相同，这就是完美视口（ideal viewport）。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到。
viewport属性
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
-
width：被用来定义layout viewport的宽度，如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为厂商默认值。
<meta name="viewport" content="width=device-width" />此时的layout viewport将成为ideal viewport，因为layout viewport宽度与设备视觉视口宽度一致了。除了width之外，还有一个属性定义也能实现ideal viewport，那就是initial-scale。 -
height：和 width 相对应，指定高度。
-
initial-scale：如果想页面默认以某个比例放大或者缩小然后呈现给用户，那么可以通过定义initial-scale来完成。
-
maximum-scale：在移动端，你可能会考虑用户浏览不便，然后给予用户放大页面的权利，但同时又希望是在一定范围内的放大，这时就可以使用maximum-scale来进行约束。
-
minimum-scale：允许用户缩放到的最小比例。
-
user-scalable：用户是否可以手动缩放，该属性的默认值为yes
-
viewport-fit： 是为了控制文档是如何填充满屏幕的。
