移动端 viewport 应写为 width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover，禁用缩放且适配安全区域，不使用 user-scalable=no 或固定 width=375。
viewport 的 content 值到底该怎么写
移动端页面不放大、不缩放、文字清晰可读，核心就靠 。最常用但最容易出错的是 content 属性——写成 width=device-width, initial-scale=1.0 是基础，但仅此不够。
常见错误是漏掉 maximum-scale=1.0 或误加 user-scalable=no（iOS 10+ 已限制该值生效，且无障碍访问会受影响）；更隐蔽的问题是未处理高 DPR 设备（如 iPhone 14 Pro）下 1px 边框发虚、字体渲染模糊。
-
width=device-width必须有，否则 iOS Safari 会按 980px 渲染 -
initial-scale=1.0要配minimum-scale=1.0和maximum-scale=1.0才能禁用双指缩放（注意：这不是强制锁定，而是告诉浏览器“默认就该这样”） - 不要写
user-scalable=no—— WCAG 不合规，Safari 也会忽略它 - 若需适配 DPR > 1，靠 CSS 媒体查询
@media (-webkit-min-device-pixel-ratio: 2)或@media (min-resolution: 2dppx)补偿，不是 viewport 能解决的
为什么设置了 viewport 还是被缩放或横向滚动
多数情况不是 另一个高频原因是图片或表格未设置 立即学习“前端免费学习笔记（深入）”； 曾经流行「动态设置 真正可靠的响应式基础是：viewport 用标准值，CSS 用相对单位（ viewport 本身不处理安全区域（safe area），但它是前提。只有先确保 典型场景：底部 TabBar 被 iPhone 底部横条遮挡，或顶部状态栏文字被刘海切掉。这时候不能靠 JS 算高度，要用 CSS 环境变量。viewport 写错了，而是页面内存在「破坏流式布局」的元素。比如：width: 100vw 配合 padding 或 border 导致实际宽度超 100%，或者某个 width: 375px（在 iPhone 13 上没问题，在 Pixel 7 上就溢出）。
max-width: 100%，尤其 height: auto，撑开父容器。
width 值：优先用 %、vw、rem，避免 px 固定宽img、video、table 加全局样式：img, video, table { max-width: 100%; height: auto; }transform: scale() 或第三方 UI 库（如某些 Vue 组件），它们可能内部重置了 layout viewport，需单独排查rem + viewport 缩放方案现在还推荐吗
document.documentElement.style.fontSize + viewport width=375」来模拟设计稿尺寸，但现在不建议。iOS 15+ 和 Android Chrome 对 viewport width 的非 device-width 值支持不稳定，且会导致 pinch-zoom 失效、输入框聚焦时页面跳动。rem 基于根字体大小，em 基于父级，vw/vh 基于视口），再配合媒体查询断点。
html { font-size: 16px; } @media (max-width: 375px) { html { font-size: 14px; } }resize 和 orientationchange，只调整 font-size，**绝不修改 viewport content**viewport width=375 这类 hack，它会让 `window.innerWidth` 返回错误值，影响手势库、图表库计算适配刘海屏和全面屏的注意事项
viewport 正确，env(safe-area-inset-*) 才能生效。
实际项目里最常被忽略的，是把 viewport 当成“一劳永逸”的开关。它只是入口，后续每一处 viewport-fit=cover（仅 iOS 支持）：padding-bottom: env(safe-area-inset-bottom) 保护底部操作区env() 在不支持的安卓机型会降级为 0，所以要加 fallback：padding-bottom: 20px; padding-bottom: env(safe-area-inset-bottom);
screen.height 判断是否刘海屏——不可靠，且不同厂商实现差异大px、每一张没设 max-width 的图、每一个没考虑 env() fallback 的 padding，都会让适配失效。
