移动端 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 写错了，而是页面内存在「破坏流式布局」的元素。比如：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; } - 用 chrome DevTools 的「Toggle device toolbar」开启「Show rulers」，看是否真有内容超出视口
- 如果用了
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 失效、输入框聚焦时页面跳动。
真正可靠的响应式基础是：viewport 用标准值，CSS 用相对单位（rem 基于根字体大小，em 基于父级，vw/vh 基于视口），再配合媒体查询断点。
- 根字体大小推荐静态设置：
html { font-size: 16px; } @media (max-width: 375px) { html { font-size: 14px; } } - 若必须动态适配（如老项目迁移），改用 js 监听
resize和orientationchange，只调整font-size，**绝不修改 viewport content** - 放弃
viewport width=375这类 hack，它会让 `window.innerWidth` 返回错误值，影响手势库、图表库计算
适配刘海屏和全面屏的注意事项
viewport 本身不处理安全区域（safe area），但它是前提。只有先确保 viewport 正确，env(safe-area-inset-*) 才能生效。
典型场景：底部 TabBar 被 iPhone 底部横条遮挡，或顶部状态栏文字被刘海切掉。这时候不能靠 JS 算高度，要用 CSS 环境变量。
- 必须搭配
viewport-fit=cover（仅 iOS 支持）： - 用
padding-bottom: env(safe-area-inset-bottom)保护底部操作区 -
env()在不支持的安卓机型会降级为 0，所以要加 fallback：padding-bottom: 20px; padding-bottom: env(safe-area-inset-bottom); - 不要在 JS 中读取
screen.height判断是否刘海屏——不可靠，且不同厂商实现差异大
实际项目里最常被忽略的，是把 viewport 当成“一劳永逸”的开关。它只是入口，后续每一处 px、每一张没设 max-width 的图、每一个没考虑 env() fallback 的 padding，都会让适配失效。