2.视口是什么

视口（viewport）就是游览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口

2.1 布局视口 layout viewport

• 一般移动设备的游览器都默认设置了一个布局视口，用于解决早期pc端页面在手机上的显示问题。
• ios，Android基本都将这个视口分辨率设置为980px，所以 pc 上的网页大多都能在手机上呈现，只不过元素看起来很小，一般是通过手动缩放

不好用

2.2 视觉视口 visual viewport

• 就是用户正看到的区域，关于网站的区域
• 可以通过缩放去操作，但不会影响布局视口，布局视口还是原来的宽度

2.3 理想视口 ideal view port

• 为了使网站在移动端有最理想的游览和阅读宽度而设定
• 对设备来说是最理想的视口尺寸
• 需要手动填写meta视口标签通知游览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口宽度一致

---

2.4 总结：

• 视口就是游览器显示页面内容的屏幕区域
• 视口分为布局视口，视觉视口和理想视口
• 我们移动端布局想要的理想视口是屏幕有多宽，布局视口就有多宽
• 想要理想视口，我们需要给移动端页面添加meta视口标签

2.5 meta视口标签

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

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

2.6 标准的viewport设置

• 视口宽度和设备保持一致
• 视口默认的缩放比1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0