viewport meta 标签必须放在 中且越靠前越好，最简有效写法是 ，否则 iOS Safari 可能已按默认 980px 渲染完毕，导致移动端显示异常。
viewport meta 标签写在哪、怎么写才生效
必须放在 里，且越靠前越好——浏览器解析到它才会开始按设定缩放页面。如果写在 或靠后位置，iOS Safari 可能已按默认视口渲染完首屏，再改也白搭。
最简可用写法是：
<meta name="viewport" content="width=device-width, initial-scale=1">
这行不是“可选优化”，而是现代响应式页面的底线配置。没它，移动端会把页面当桌面站渲染（比如按 980px 宽度布局），文字小得看不清，用户得双指放大才能阅读。
content 属性里几个关键参数的实际效果
width=device-width 让视口宽度等于设备物理屏幕的 CSS 像素宽（比如 iPhone 14 是 390px），而不是固定值或width=1024这种过时写法；initial-scale=1 表示初始缩放为 1:1，不放大也不缩小。
立即学习“前端免费学习笔记（深入）”；
常见误用：
-
user-scalable=no—— 禁止缩放，但 WCAG 无障碍要求明确反对，iOS 16+ 已部分忽略该设置 -
maximum-scale=1—— 和user-scalable=no效果类似，同样存在兼容性和可访问性问题 -
width=375这种硬编码 —— 在非 375px 宽设备上直接导致横向滚动或内容被裁剪
为什么 iOS Safari 对 viewport 更敏感
iOS Safari 的视口行为和 Chrome/Android Webview 不完全一致：它会根据 initial-scale 和 width 推导出一个“layout width”，再决定字体渲染、媒体查询触发点。哪怕写了 width=device-width，如果 initial-scale 缺失或为 0，某些老版本仍会 fallback 到 980px。
实操建议：
- 始终显式写全
width=device-width, initial-scale=1 - 避免用 JS 动态插入 viewport meta 标签（iOS 不认）
- 不要依赖
document.documentElement.clientWidth判断视口宽——它返回的是 layout width，可能和screen.width或媒体查询结果不一致
适配高 DPR 屏幕时 viewport 和 CSS 像素的关系
viewport 设置不影响设备像素比（DPR）。比如 iPhone 13 的 DPR 是 3，但 width=device-width 给你的是 390 个 CSS 像素，不是 1170 个物理像素。图片模糊、border 看起来发虚，往往不是 viewport 没设对，而是没配合 srcset 或 image-set() 提供高倍图。
容易被忽略的一点：viewport 不解决 DPR 导致的视觉细节问题，它只管“这个页面该按多宽来排版”。想让 1px 边框在 Retina 屏上不发虚，得用 transform: scale(0.33) 或 border: 0.33px solid #000（部分浏览器支持）这类 CSS 方案，而不是改 meta。
