触摸目标必须实测≥48×48px，viewport需设user-scalable=no+max/min-scale=1.0+viewport-fit=cover，并配合安全区padding；语义化标签、精简dom与html体积（≤15kb gzip）、关键css内联及脚本异步加载均为移动端无障碍与性能刚需。
触摸目标必须达到 48×48 CSS 像素
不是“看着像按钮就行”，而是 clientWidth × clientHeight 实测值必须 ≥ 48×48。iOS VoiceOver 和 Android TalkBack 都会跳过小于该尺寸的可触元素，导致辅助功能失效，且手指误触率飙升。
-
<button></button>或<a></a>上只写font-size: 14px; padding: 6px 12px？算一下：14 + 6×2 = 26px 高，远不够 - 图标按钮如
<button><svg></svg></button>必须显式设min-width: 48px; min-height: 48px;，不能依赖 SVG 自身 viewBox 尺寸 - 相邻可触元素（比如一排 tab）间距至少
8px，否则 iOS VoiceOver 滑动切换焦点时容易连跳两个 - 用 Chrome DevTools 切换设备模式后右键元素 → “Scroll into view” → 再 inspect 查看实时渲染尺寸，比靠 CSS 估算更可靠
viewport 必须带 user-scalable=no 且配 viewport-fit=cover
缺 user-scalable=no，用户双指一捏就缩放错乱；缺 viewport-fit=cover，iPhone X 及后续刘海屏机型顶部状态栏和底部 Home Indicator 区域会被内容遮挡或留白。
- 完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"> - 仅设
user-scalable=no不够——iOS Safari 会禁用双击缩放，但依然允许手势缩放；加maximum-scale=1.0+minimum-scale=1.0才真正锁死 - 配合 CSS 使用安全区：
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } - 别信“移动端不需要禁用缩放”的说法：表单输入框聚焦时系统会自动放大，此时若页面被缩放过，会导致布局偏移、光标错位
用语义化标签替代 <div> 堆叠
<p>不是为了“语义好看”，而是影响 DOM 解析速度、屏幕阅读器导航逻辑、甚至 Google 搜索结果摘要生成。Chrome DevTools 里 DOM 节点数超 800 个，首屏渲染就容易卡顿。</p>
<ul><li>把 <code><div class="header"> 换成 <code><header></header>，<div class="nav"> 换成 <code><nav></nav>，<div class="main"> 换成 <code><main></main>
<table> + <code><th scope="col">，别用 <code><div> 模拟——TalkBack 在竖屏下会完全读错行列关系
<li>避免嵌套超过 4 层的 <code><div>；右键元素 → “Reveal in Elements Panel”，观察层级深度
<li>CMS 输出的冗余 wrapper（如 <code><div class="wrapper"><div class="container"><div class="content">）必须在模板层砍掉，不能靠 JS 后置清理
<h3>首屏 HTML 体积必须控制在 15KB（gzip 后）</h3>
<p>不是“越小越好”，而是超过 15KB 后，3G 网络下白屏时间极易突破 1 秒——用户还没看到内容，已决定离开。</p>
<ul><li>删掉所有无功能的空 <code><div>、CMS 自动生成的注释、冗余 class 名（如 <code>class="clearfix clear-fix clear-fix-both"）
<script></script> 标签必须带 async 或 defer；统计脚本、埋点代码禁止内联<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">
@import：它会让 CSS 加载串行化，在 3G 下可能多拖 800ms
