viewport

知道viewport是响应式时候用的，写web页面的时候，顺手就加上了。

今天认真看了看 ，

<meta name="viewport" content="width=1200, minimum-scale=0.25, maximum-scale=1.0, user-scalable=yes"/>

究竟是什么。

一，首先  移动端的像素和pc端的像素不一样哈

pc端浏览器，css中的一个像素和屏幕物理的像素是一一对应的

而在 移动端，css中的一个像素对应多少物理像素就不一定了

如果移动端分辨率越高 ，那么一个css像素对应更多的物理像素/

 

二，三个viewport理论

layout viewport ：真实的，大于可见区域的

visual viewport ：可见

ideal viewport：无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

 

三，viewport 的各种属性

mame	value
width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许