移动端视口（布局视口、视觉视口、理想视口）

视口

• 视口就是浏览器显示页面内容的屏幕区域。
• 视口的分类：布局视口、视觉视口、理想视口。

布局视口(layout viewport)

• 一般移动设备的浏览器都默认设置了一个布局视口，并且该视口最常见的分辨率为980px。
• 由于980px的宽度大于大部分手机屏幕的宽度，为了将页面显示完全，只能对原来的页面进行缩放，如果不进行缩放，那么就需要左右拖动来浏览。（大部分浏览器默认采用缩放方式）

视觉视口(visual viewport)

• 视觉视口是指用户正在看到的网页的区域。
• 用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也会变大；同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也会变小。
• 不管用户如何缩放，都不会影响到布局视口的宽度。

理想视口（ideal viewport)

• 布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

• 理想视口需要添加meta视口标签，用于设置布局视口的宽度和设备的宽度相等。

• meta视口标签代码如下：

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

注意：
1、meta视口标签相关属性的具体说明见下表：

属性	说明
width	宽度设置的是viewport宽度，可以设置值为：device-width
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比（范围0.1 - 10）
minimum-scale	最小缩放比（范围0.1 - 10）
user-scalable	用户是否可以缩放，yes或no（1或0）

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！