移动设备中的viewport

一、概念

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那块区域。

二、layout viewport、visual viewport以及ideal viewport

1、layout viewport
为了让移动端浏览器能够将网页中的内容全部显示出来，浏览器会将viewport设置为一个比较宽的值。这个是移动设备默认的viewport。

2、visual Viewport
这个值可以理解为浏览器可视区域的大小。

3、ideal viewport
能够完美适配移动设备的Viewport，不会因为设备的分辨率的不同而展示出来的大小不同。

三、利用meta标签对Viewport进行控制

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

width
设置layout viewport 的宽度，为一个正整数，或字符串"device-width"

initial-scale
设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数

height
设置layout viewport 的高度，这个属性对我们并不重要，很少使用

user-scalable
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

注、device-width代表当前设备的宽度

四、总结

每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用上面meta标签来得到一个理想的viewport。