标准答案
- meta viewport 用来控制移动端的布局视口宽度和初始缩放规则。
- 移动浏览器为了兼容桌面网页，默认可能使用较宽的布局视口再缩小页面，响应式布局就不能按设备宽度正常工作。
- 常见配置是 width=device-width, initial-scale=1，意思是让布局视口等于设备宽度，初始缩放比例为 1。
- 这样媒体查询、百分比布局和弹性布局才能按移动端预期生效。
- 它只是响应式基础，不等于自动适配移动端；也不要随意禁用用户缩放，maximum-scale 和 user-scalable=no 会影响可访问性。
题目解析
- width=device-width：布局视口宽度等于设备宽度。
- initial-scale=1：初始缩放比例为 1。
- maximum-scale、minimum-scale：限制缩放范围，但不建议随意禁用用户缩放。
- viewport-fit=cover：适配刘海屏等安全区域，通常还要配合 env(safe-area-inset-*)。
回答时可以补充三个概念：布局视口、视觉视口和理想视口。meta viewport 主要影响布局视口，用户手势缩放后视觉视口可能继续变化。
代码示例
常规响应式页面一般使用下面这行配置。
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">CSS
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}常见误区
- 为了禁止双指缩放写 user-scalable=no，这会伤害可访问性。
- 以为加了 viewport 就自动完成响应式。它只是视口基础，布局仍需要媒体查询、弹性布局和合理尺寸。
- 忽略安全区域，导致底部按钮或顶部内容被系统区域遮挡。