meta viewport 是移动端页面中非常关键的一个配置，用于控制页面在移动设备上的 视口（Viewport）大小以及缩放行为。移动浏览器默认会使用一个虚拟布局视口来渲染 PC 网站，如果不进行配置，页面通常会被整体缩小显示，导致字体和布局异常。因此需要通过 viewport 指定页面的显示规则。

技术分析

在移动浏览器中通常存在两个概念：layout viewport（布局视口） 和 visual viewport（视觉视口）。布局视口通常会被设定为一个较大的宽度（例如约 980px），用于兼容 PC 页面，而视觉视口则是用户当前实际看到的区域。

meta viewport 的作用是让开发者能够控制布局视口与设备屏幕之间的关系。例如常见配置：

复制
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中 width=device-width 表示布局视口宽度与设备屏幕宽度保持一致，这样 CSS 中的 px 就会按照设备宽度进行布局。initial-scale=1.0 则表示页面初始缩放比例为 1，不会在加载时自动缩放。

除此之外，viewport 还可以控制页面是否允许用户缩放（user-scalable）、最大和最小缩放比例（maximum-scale、minimum-scale）等，从而影响页面的交互体验。

如果不设置 viewport，移动浏览器通常会按照 PC 页面逻辑渲染页面，再自动缩小以适应屏幕，这会导致响应式布局、媒体查询和移动端适配策略无法正常工作。

工程实践

在移动端开发中，meta viewport 是响应式布局的基础配置。无论是使用 flex、rem、vw 还是媒体查询进行适配，都依赖于正确的视口宽度。

大多数移动端项目都会使用类似如下配置：

复制
1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这样可以保证页面宽度与设备宽度一致，并避免用户误触导致页面缩放。如果涉及无障碍设计或需要支持放大阅读，则通常不会限制 user-scalable。