viewport,它是显示网页的浏览器的窗口部分。在PC端,它基本上等于设备的显示区域,但在移动端,视口将超过设备的显示区域(即将有一个水平滚动条)。

移动浏览器将页面放在一个虚拟的“窗口”中。通常,虚拟“窗口”比屏幕更宽。这样,每个网页就不需要被压缩到一个非常小的窗口中(这将破坏不适合移动浏览器的网页布局)。用户可以平移和缩放以查看网页的不同部分。

用法:

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

都有下面这些属性:

width 正整数 | device-width 定义视口的宽度,单位为像素
height 正整数 | device-height 定义视口的高度,单位为像素,一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes | no 定义是否允许用户手动缩放页面,默认值yes