最推荐的 viewport meta 标签写法是 width=device-width, initial-scale=1.0，它强制 layout viewport 宽度等于设备理想视口宽度并以 1:1 像素比渲染，兼容全部主流移动浏览器，符合 W3C 与 Google 推荐标准。
最推荐的 viewport meta 标签写法，核心目标是让页面在各类移动设备上“自然适配”——文字清晰可读、布局不横向溢出、缩放行为合理。不同写法差异主要体现在宽度设定、缩放控制和用户交互限制上，直接影响 layout viewport 的取值和渲染表现。
基础推荐写法：width=device-width, initial-scale=1.0
这是当前绝大多数响应式项目的标准配置，也是 W3C 和 Google Web Fundamentals 明确推荐的最小安全集。
- width=device-width：强制 layout viewport 宽度等于设备的理想视口（ideal viewport）宽度，比如 iPhone 14 是 390px，Pixel 7 是 412px；不再沿用默认的 980px，避免小字、横向滚动条
- initial-scale=1.0：确保页面加载时以 1:1 像素比渲染，不放大也不缩小，文字大小符合 CSS 像素预期
- 该写法兼容 iOS Safari、Chrome for Android、Firefox Mobile、Samsung Internet 等全部主流引擎，无已知兼容性问题
增强可访问性写法：width=device-width, initial-scale=1.0, maximum-scale=5.0
在基础之上放宽缩放上限，兼顾低视力用户需求，同时保留基本控制力。
- 允许用户双指放大至 5 倍（iOS 默认上限为 10，Android 通常为 5），满足 WCAG 1.4.4 缩放要求
- 不设
user-scalable=no或minimum-scale，避免禁用缩放引发可访问性投诉（WCAG 1.4.10 明确反对完全禁用） - 实际影响：在 iPhone 上，document.documentElement.clientWidth ≈ screen.width；在折叠屏或横屏切换时，能动态响应 viewport 变化
谨慎使用的限制型写法：width=device-width, initial-scale=1.0, user-scalable=no
曾被广泛用于“App 风格”网页，但如今已被主流平台和规范弱化建议。
- 禁止用户缩放，在部分 Android 机型（如旧版 Samsung Browser）中可能失效；iOS 13+ 起，即使设了 no，辅助功能中的“更大字体”仍可绕过
- 实测影响：当用户开启系统级“更大动态类型”或“显示缩放”设置时，该标签可能造成文字截断或布局错位
- 仅建议用于 kiosk 模式、车载界面等封闭场景，普通网站不推荐
特殊场景写法：width=375, initial-scale=1.0（固定宽度模拟）
极少使用，仅限调试或遗留系统兼容需求。
- 将 layout viewport 强制设为 375px（类 iPhone SE 尺寸），所有设备都按此宽度计算 100%、rem 基准等
- 副作用明显：在大屏平板（如 iPad Pro 12.9"）上内容严重留白；在窄屏设备（如 Galaxy Z Flip）上可能触发横向滚动
- 现代开发中应优先用媒体查询 + fluid typography 替代固定宽度方案
本质上，viewport 不是“让页面变小”，而是“告诉浏览器：请按真实设备宽度来解析 CSS 百分比和 flex 布局”。只要 width=device-width 成立，配合相对单位和媒体查询，就能覆盖从 320px 到 1280px 的绝大多数移动与折叠设备。不复杂，但容易忽略。
