viewport meta 必须同时设置 width=device-width 和 initial-scale=1，缺一则导致高 dpr 设备文字过小、边框发虚；user-scalable=no 在 ios 10+ 失效且违反可访问性；动态插入 viewport 无效，须在 html 解析前内联声明。
viewport meta 必须同时写 width=device-width 和 initial-scale=1
只写 width=device-width，iOS Safari 会先按物理像素宽度（如 iPhone 15 Pro 是 1290px）布局，再自动缩放到视口可见范围，导致 CSS 的 16px 字体视觉上只剩不到 12px；只写 initial-scale=1，部分 Android WebView 会忽略设备宽度计算，引发横向滚动。二者缺一不可，这是 DPR 感知渲染的起点。
-
width=device-width告诉浏览器：用设备报告的 CSS viewport 宽度（已除过 DPR），不是物理像素 -
initial-scale=1强制 1 个 CSS 像素 = 1 个设备独立像素（DIP），对齐 DPR 缩放基线 - 二者组合才能让高 DPR 设备（如 Pixel 8、iPhone 15 Pro）不出现文字过小、边框发虚、点击区域过窄
user-scalable=no 在 iOS 10+ 上完全失效且有害
苹果从 iOS 10 起主动屏蔽 user-scalable=no，这是 WCAG 可访问性强制要求。你写了，用户照样双指缩放，辅助工具（如 VoiceOver）反而可能报错。更糟的是，maximum-scale=1.0 在部分 iOS 版本会触发“页面无法缩放”警告弹窗，体验比允许缩放还差。
- 真机测试时，
user-scalable=no+maximum-scale=1连用等于锁死所有缩放能力，违反可访问性规范 - 想防误触缩放？用 CSS
touch-action: manipulation更可靠，它只禁用双指缩放，不影响单指滚动和点击 - 若业务强控（如 Kiosk 屏），应通过 native 层统一控制缩放，而非依赖 viewport 参数
动态设置 viewport 缩放比例（如 DPR 缩放）必须在 HTML 解析前执行
用 JS 动态插入 <meta name="viewport"> 是常见错误。iOS Safari 和多数 Android WebView 仅在首次解析 HTML 时读取 viewport，之后插入或修改 content 属性会被忽略。所谓“DPR 缩放适配”（如 scale = 1 / window.devicePixelRatio）若晚于首屏渲染，就毫无意义。
- 必须把 JS 放在
最顶部，甚至早于<meta charset>，确保在浏览器开始 layout 前生效 - 不要用
document.head.appendChild()，而要用document.write()或内联 script（SSR 模板中也需服务端吐出） - 桌面 Chrome 完全不解析
initial-scale等缩放属性——它只在 DevTools 响应式模式下启用 viewport 解析逻辑
1px 边框发虚、字体偏小不是 viewport 能解决的问题
<meta name="viewport"> 只定义 CSS 像素与物理像素的映射关系，它不负责渲染质量。DPR=3.5 时，border: 1px 实际要渲染 3.5 个物理像素，浏览器做亚像素插值，必然模糊；font-size: 16px 也会被系统“更大字体”设置覆盖，尤其在横屏/阅读模式下。
- 别硬写
border: 0.5px——多数浏览器不支持非整数 px 渲染，会四舍五入成1px或0px - 推荐用伪元素 +
transform: scaleY(0.5)模拟 0.5px 线，或改用box-shadow: 0 0 0 0.5px #000 - 根字号建议用
html { font-size: 100%; }配合text-size-adjust: none，避免 iOS 自动调整文本大小
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
