viewport特性

什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

通常情况下，viewport有以下6种设置。
当然厂商可能会增加一些特定的设置，比如iOS Safari7.1增加了一种在网页加载时隐藏地址栏与导航栏的设置：minimal-ui，不过随后又将之移除了。

width

width被用来定义layout viewport的宽度，如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为厂商默认值。如：iPhone为980px；

举个例子：

<meta name="viewport" content="width=device-width" />

此时的layout viewport将成为ideal viewport，因为layout viewport宽度与设备视觉视口宽度一致了。

除了width之外，还有一个属性定义也能实现ideal viewport，那就是initial-scale。

height

与width类似，但实际上却不常用，因为没有太多的use case。

initial-scale

如果想页面默认以某个比例放大或者缩小然后呈现给用户，那么可以通过定义initial-scale来完成。

initial-scale用于指定页面的初始缩放比例，假定你这样定义：

<meta name="viewport" content="initial-scale=2" />

那么用户将会看到2倍大小的页面内容。

在说width的时候，我们说到initial-scale也能实现ideal viewport，是的，你只需要这样做，也可以得到完美视口：

<meta name="viewport" content="initial-scale=1" />

maximum-scale

在移动端，你可能会考虑用户浏览不便，然后给予用户放大页面的权利，但同时又希望是在一定范围内的放大，这时就可以使用maximum-scale来进行约束。

maximum-scale用于指定用户能够放大的比例。

举个例子来讲：

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的5倍。

minimum-scale

类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。

通常情况下，为了有更好地体验，不会定义该属性的值比1更小，因为那样页面将变得难以阅读。

user-scalable

如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。

转载来自https://www.cnblogs.com/miragele/p/5449218.html