viewport meta 标签是移动端渲染的强制开关，必须置于head内靠前位置，最简写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，禁用user-scalable=no以保障可访问性，需配合CSS响应式布局及真机测试验证。
viewport meta 标签必须写对
网页在手机上缩放异常、文字过小或布局错乱，90% 是因为 <meta name="viewport"> 缺失或参数错误。它不是可选的“优化项”，而是移动端渲染的强制开关。
- 必须放在
<head>内，且越靠前越好（浏览器解析到就立即生效） - 最简可用写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
width=device-width表示视口宽度 = 设备屏幕物理宽度（单位是 CSS 像素），没有它，桌面版默认 980px 视口会强行缩小整个页面 -
initial-scale=1.0禁止初始缩放，避免 iOS Safari 自动把文字放大
别加 user-scalable=no 这种禁用缩放的配置
很多老教程或 CMS 模板会塞进 user-scalable=no，这是 WCAG 可访问性违规项，iOS 和 Android 最新版浏览器已部分忽略该指令，但会触发警告或降级行为。
- 真实用户需要双指缩放看图、读小字、填表单——禁用等于制造障碍
- 如果真要限制缩放范围，可用
minimum-scale=1.0, maximum-scale=2.0，但不要锁死 - 安卓 Chrome 对
user-scalable=no的处理不一致，部分机型直接失效，反而让适配逻辑不可控
响应式布局还得靠 CSS 配合
<meta name="viewport"> 只解决“视口尺寸”问题，不解决“内容怎么排”。脱离 CSS 的 media query 或 flex/grid，光靠 meta 标签毫无意义。
- 检查是否用了
rem或em单位配合根字体大小动态调整？固定px在高 DPI 屏幕上会糊 - 有没有为
max-width: 480px、min-width: 768px等典型断点写样式？别只依赖device-width - 测试时别只看 Chrome DevTools 的模拟器——真机横竖屏切换、键盘弹出都会改变视口高度，
vh单位可能跳变
某些场景下需要额外声明
纯静态页用基础 meta 就够了，但涉及 Web App、PWA 或 iOS Safari 特殊行为时，得补几个关键声明。
立即学习“前端免费学习笔记（深入）”；
- 想让 iOS Safari 隐藏地址栏？加
<meta name="apple-mobile-web-app-capable" content="yes">，但必须搭配manifest.json才真正生效 - 状态栏颜色控制（仅 iOS）：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">，注意值只能是default、black、black-translucent - 安卓 Chrome 的主题色：
<meta name="theme-color" content="#4285f4">，影响地址栏和任务卡片背景
header.php 里漏写了，或者某个插件动态注入了冲突的 meta 标签。上线前用真机访问，打开开发者工具的「Rendering」面板，手动改 viewport content 值，立刻就能验证效果。 
