viewport meta 标签必须正确书写，否则适配失效；最简写法为 ，禁用缩放需慎用 user-scalable=no。
viewport meta 标签必须写对，否则所有适配都是空谈
移动端页面不缩放、文字过小、布局错乱，90% 的原因是 缺失或参数错误。它不是可选配置，是 HTML5 移动端渲染的强制开关。
常见错误包括：width=device-width 拼错成 width=devicewidth，漏掉 initial-scale=1.0，或加了 user-scalable=no 却没考虑无障碍需求。
- 最简可用写法：
- 若需禁用双击缩放（慎用）：
user-scalable=0或user-scalable=no，但 iOS Safari 14+ 已忽略该值，仅作兼容提示 -
maximum-scale和minimum-scale会干扰辅助功能，非强需求不要设 - 不要用
width=375或具体像素值——这会让页面在大屏手机上横向滚动
CSS 中避免固定 px 宽度，优先用 rem/vw + 媒体查询兜底
直接写 width: 320px 在 iPhone 14 Pro Max 上会只占屏幕 1/3，而 width: 100vw 又可能因滚动条宽度导致溢出。关键不是“不用 px”，而是“在哪用、怎么换算”。
rem 是最稳妥的响应式单位，但它的基准值（html 的 font-size）必须动态设置，不能写死。
立即学习“前端免费学习笔记（深入）”；
- 推荐 JS 动态设置根字号：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';
（以 375px 设计稿为基准，16px 对应 1rem） - 纯 CSS 方案可用
clamp()：font-size: clamp(14px, 4vw, 18px);，但 IE 不支持 - 媒体查询别只写
@media (max-width: 768px)—— 应按设备逻辑分层，例如：@media (min-width: 320px) and (max-width: 480px)专适小屏安卓 - 慎用
vmax/vmin做全屏背景，某些 Android WebView 会计算错误
图片和 iframe 必须声明 max-width: 100%，且避免内联 width/height 属性
HTML 中写 
width 属性权重极高，CSS 很难覆盖。
即使用了 object-fit，若父容器没设宽高约束，依然会失真。移动端图片加载慢还容易触发回流。
- 全局重置（推荐）：
img, iframe, video { max-width: 100%; height: auto; } - 禁止在 HTML 标签里写
width/height数值，改用 CSS 类控制尺寸 - 响应式图片用
srcset，例如： - 第三方 iframe（如地图、视频）需额外包裹一层
div并设overflow: hidden，防止其内部滚动破坏页面流
触摸事件区域太小、点击反馈缺失，等于放弃移动端体验
PC 上 :hover 能用，手机上手指点不到 44×44px 的按钮，用户根本点不中。这不是“看起来像移动端”，而是“能不能用”的分水岭。
Chrome DevTools 的 device toolbar 只能模拟视口，无法替代真机测试——很多触摸延迟、300ms 点击延迟、input 聚焦异常，只在真机复现。
- 最小触控目标：iOS 要求 ≥ 44×44pt，Android ≥ 48×48dp；换算为 CSS 像素，建议统一设
min-width: 44px; min-height: 44px; - 移除 300ms 延迟：
+ 在 CSS 中加* { touch-action: manipulation; } - 表单元素（
,）务必设font-size≥ 16px，否则 iOS 会自动放大页面 - 避免在
click事件里做 heavy 操作（如大量 DOM 插入），改用touchend并preventDefault()防止误触发 scroll
实际发布时，别只盯着“能不能打开”，重点测三件事：横屏是否崩、微信内置浏览器是否白屏、低端安卓 WebView 是否卡顿。这些地方的兼容性断层，往往比代码逻辑更致命。
