3、视口（Viewport）机制：移动端视口概念、布局视口与视觉视口、meta viewport标签详解
做移动端适配，绕不开一个核心概念——视口（Viewport）。
说实话，我早年刚接触移动端开发时，就被这个视口搞得晕头转向。明明在PC上好好的页面，到了手机上要么缩成一团，要么横向滚动条冒出来。后来我才明白，这一切的根源，就是视口机制在作祟。
3.1 什么是视口？
视口，简单说就是浏览器显示网页内容的那个「窗口区域」。但移动端的情况比PC复杂得多——它有三个不同的视口概念。
你可能会问：「一个窗口就一个窗口，哪来三个？」嗯，这正是移动端适配的痛点所在。
移动端的三个视口：
- 布局视口（Layout Viewport）——CSS布局参考的基准
- 视觉视口（Visual Viewport）——用户肉眼看到的区域
- 理想视口（Ideal Viewport）——我们真正想要的效果
下面这张图，能帮你快速理清这三者的关系：
3.2 布局视口 vs 视觉视口
布局视口，说白了就是CSS世界里的「画布大小」。移动端浏览器默认把布局视口设成980px左右——为什么是980？因为早期PC网页大多是这个宽度，浏览器想兼容它们。
我举个例子你就明白了。假设你写了一个div，宽度设为100%。在PC上它占满屏幕。但在手机上，这个100%是相对于布局视口的980px来的。所以你的div实际宽度是980px，而手机屏幕只有375px宽——结果就是整个页面被等比缩小，字小到看不清。
我的经验：布局视口是CSS布局的「坐标系」，视觉视口是用户的「取景框」。两者不一致，就会导致缩放问题。
视觉视口就简单了——它就是用户手机屏幕上实际显示的那一块。你拿iPhone 12，视觉视口宽度就是390px（物理像素的一半，因为2x屏）。
我记得有一次调试一个项目，发现页面在iPhone上左右有白边。查了半天，原来是布局视口设成了1200px，而视觉视口只有375px。页面内容被「挤」在中间，两边空荡荡的。嗯，这种坑踩过一次就记住了。
3.3 理想视口——我们真正想要的
理想视口，就是让布局视口等于视觉视口。说白了，让CSS的1px等于设备上的1个CSS像素，不缩放、不拉伸。
怎么实现？靠的就是下面这个标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码，可以说是移动端适配的「定海神针」。我建议每个移动端项目都加上它，不加的话后面一堆麻烦事。
3.4 meta viewport 标签详解
这个标签有6个属性可以配置，但常用的就3个：
| 属性 | 可选值 | 说明 |
|---|---|---|
| width | 数值 或 device-width | 设置布局视口宽度。device-width 就是设备宽度 |
| initial-scale | 0.1 ~ 10.0 | 页面初始缩放比例。1.0 表示不缩放 |
| maximum-scale | 0.1 ~ 10.0 | 允许用户最大缩放比例 |
| minimum-scale | 0.1 ~ 10.0 | 允许用户最小缩放比例 |
| user-scalable | yes / no | 是否允许用户缩放 |
| viewport-fit | auto / contain / cover | 适配刘海屏等异形屏（iOS 11+） |
注意：我曾经见过有人把 user-scalable=no 和 maximum-scale=1.0 一起用，结果在iOS上导致页面无法滚动。这是iOS的bug，但踩到就是踩到了。建议保留用户缩放能力，除非有特殊需求。
3.5 实战配置方案
我个人最常用的配置是：
<!-- 标准配置，适用于大多数项目 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 禁止缩放的配置（慎用） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 适配刘海屏的配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">为什么我推荐第一种？因为简单、安全。用户想放大看细节，那是他的自由。你强行禁止缩放，反而影响用户体验。
核心要点总结：
- 布局视口是CSS的参考系，默认980px
- 视觉视口是用户看到的区域，等于设备宽度
- meta viewport 让两者统一，实现「理想视口」
- width=device-width + initial-scale=1.0 是最佳实践
好了，视口机制就讲到这里。你只要记住：没有meta viewport标签，移动端适配就是空中楼阁。下一节我们会聊rem和vw这两个实战中常用的单位，到时候你会更深刻地理解视口的重要性。
一个小技巧：调试时可以在Chrome DevTools的「Rendering」面板里勾选「Display Layout Viewport」，这样能直观看到布局视口的边界。我调试视口问题时必开这个选项。
可可精品资料库