html5中推荐使用适配移动端视口，其中width=device-width使视口等于设备逻辑像素宽，initial-scale=1.0确保1:1初始显示；可选添加maximum-scale、user-scalable等参数，但禁用缩放需谨慎，固定width值或省略initial-scale均不推荐。
在 HTML5 中，通过 <meta name="viewport"> 标签设置移动端视口，核心是控制页面在移动设备上的初始缩放、宽度适配和用户缩放行为。最关键的参数是 width 和 initial-scale，其他如 maximum-scale、user-scalable 属于可选约束。
基础写法：适配屏幕宽度
最常用、推荐的写法是：
其中：
- width=device-width：让视口宽度等于设备逻辑像素宽度（如 iPhone SE 是 375px，iPhone 14 Pro 是 393px），而非默认的 980px 或其他桌面值；
- initial-scale=1.0：页面加载时以 1:1 比例显示，不放大也不缩小，文字和布局按 CSS 像素自然呈现。
常见补充参数与使用场景
根据产品需求，可追加以下属性（用逗号分隔）：
- maximum-scale=1.0：限制最大缩放为 1，常用于禁止双指放大（如金融类表单页）；
- user-scalable=no：彻底禁用用户手动缩放（注意：iOS Safari 10+ 已忽略该值，仅作兼容提示）；
-
minimum-scale=1.0：防止用户意外缩到过小（配合
user-scalable=yes时更有效）； - shrink-to-fit=no（仅 Safari iOS）：禁用 Safari 自动缩放以适应内容的行为，避免文字被强制缩小。
不推荐的写法与风险
以下用法容易引发问题，应避免：
- 固定数值设
width=375：不同设备宽度差异大，会导致在大屏上横向滚动或小屏上内容挤压； - 省略
initial-scale：部分 Android 浏览器可能默认缩放，导致文字模糊或布局错位； - 只写
user-scalable=no不配maximum-scale：在某些旧版 WebView 中失效，且不符合可访问性规范。
响应式开发中的注意事项
viewport 设置只是起点，还需配合 CSS 才能真正适配：
- CSS 中使用
rem或vw/vh单位时，依赖 viewport 正确设置； - 媒体查询（
@media (max-width: 768px)）基于视口宽度，不是物理像素； - 若页面含
<iframe></iframe>，子页面需单独设置自己的 viewport，父页设置不影响其内部缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
