必须写在最开头且仅含width=device-width, initial-scale=1.0；位置靠后、动态插入或含冗余参数（如user-scalable=no）均会导致失效，ios safari和多数安卓webview直接忽略，视口仍为默认980px。
必须写在 最开头，且只用 width=device-width, initial-scale=1.0 —— 其他任何参数都是冗余甚至有害的。
viewport 标签位置错了就等于没写
浏览器一解析到 <meta name="viewport"> 就立刻重设视口；如果它出现在 <meta charset> 后面、被 SSR 注释挤开、或用 JS 动态 appendChild() 插入，iOS Safari 和多数安卓 WebView 直接忽略。真机上表现为： 的 clientWidth 仍是 980，不是设备真实宽度（如 iPhone 13 应为 ~390）。
- 检查 Elements 面板，确认该标签是
的第一个子节点 - 禁用所有构建工具自动注入的占位符或注释（Vite、Webpack、Next.js SSR 模板常翻车）
- 绝对不要写在
里——Chrome 和 Safari 都不认
content 值只留两个参数就够了
width=device-width 和 initial-scale=1.0 是唯一必须共存的组合。缺一不可：
- 只写
width=device-width：老版 iOS（如 iOS 9）可能 fallback 到 980px 缩放逻辑 - 只写
initial-scale=1.0：部分安卓 WebView 忽略，文字照旧小得看不清 - 加
maximum-scale=1.0或user-scalable=no：违反 WCAG 2.1，系统「更大字体」设置失效，iOS 输入框还可能强制放大 - 写死
width=375：横屏时直接崩，Pixel 系列或 iPad 上完全错位
写了 viewport 还横向滚动？真凶不在 meta 标签里
<meta name="viewport"> 只负责告诉浏览器“画布怎么铺开”，不解决布局溢出。常见配套问题：
- CSS 里用了硬编码
width: 375px或font-size: 16px—— 该换rem、vw或百分比 - 图片没加
max-width: 100%; height: auto;，直接撑破容器 - 媒体查询断点照搬别人家的
@media (max-width: 768px)，但实际内容在 640px 就已挤不开 -
或上写了font-size: 62.5%却没同步调整 rem 基准，DPR > 1 设备下字体全乱
最常被忽略的是：viewport 写对了，但 CSS 里还在用固定 px 值画边框、阴影、字体——这些在高 DPR 设备上会渲染成亚像素，导致模糊或消失。需要改用 transform: scaleY(0.5) 模拟 0.5px，或用 border-image + SVG 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
