版权声明：转载请注明博客地址谢谢。 https://blog.csdn.net/buppt/article/details/81221395
viewport概念
viewport就是浏览器上用来显示网页的那部分区域。viewport分为三种：
| layout viewport | 整个网页所占据的区域 |
|---|---|
| visual viewport | 网页在浏览器上的可视区域 |
| ideal viewport | ideal viewport是一个能完美适配移动设备的viewport |
- ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。 即屏幕的宽度。
内容
由于默认的viewport是layout viewport，而移动设备的可视区域比pc要小，所以页面移动设备上的字体会很小或出现横向滚动条。
为了解决这个问题，开发网页的时候一般会在head里加入这行代码，使viewport的宽度变成ideal viewport的宽度，即防止横向滚动条出现。
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width能使所有浏览器当前的viewport宽度变成ideal viewport的宽度。
initial-scale=1是将页面的初始缩放值设为1。
缩放为1其实就是没缩放。。但是这么写的原因是width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。所以，把两者都写上去，才可以将所有的设备的viewport宽度变成ideal viewport的宽度。
viewport所有属性如下表：
| 属性 | |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串”width-device” |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许 |