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 是否卡顿。这些地方的兼容性断层，往往比代码逻辑更致命。