viewport标签必须放在最前面且唯一，仅用width=device-width, initial-scale=1.0；位置错误、动态插入、多标签或加user-scalable=no等均导致失效，引发缩放异常、文字模糊及横向滚动。
viewport 标签必须放在 最前面且只写一次
页面在手机上缩成一团、文字糊、左右可拖动，90% 是因为 <meta name="viewport"> 没生效。浏览器按顺序解析 HTML，如果它被 JS 动态插入、或被框架 SSR 漏掉、或写在其他 <meta> 后面，首次渲染就已按错误配置执行。
常见错误包括：
- 用
document.head.appendChild()在DOMContentLoaded后补写——iOS Safari 直接忽略 -
里写了两次，后一个覆盖前一个，但首屏已崩 - 写成
width=375或width=1200这类固定值——折叠屏、iPad 分屏、横屏键盘弹出时全失效
最简有效写法只有一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。别加 user-scalable=no 或 maximum-scale=1.0，它们既不真正禁用缩放，又违反 WCAG 可访问性要求。
触摸目标必须 ≥ 48×48 CSS 像素
移动端不是“缩小版桌面”，手指点击精度远低于鼠标。所有可操作元素（按钮、链接、表单项、图标）的点击区域必须满足最小尺寸，否则屏幕阅读器用户和普通用户都会误触或点不中。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 不要只靠
padding或font-size勉强撑大，要确保整个hit area（含内边距+边框）≥ 48×48px - 避免密集排列，相邻可点击元素间距至少 8px，给手指“呼吸空间”
- 用
<label for="xxx"></label>关联表单控件，扩大点击范围；<input type="checkbox">等小控件务必包裹<label></label> - 禁用
touch-action: manipulation以外的手势拦截，否则 VoiceOver/TalkBack 手势会失效
语义化 HTML 结构决定内容流是否可靠
响应式不是靠 CSS 强行“重排”，而是靠 DOM 顺序天然适配垂直堆叠逻辑。移动端没有横向空间奢侈，所有内容最终要按 HTML 顺序从上到下读取。
容易踩的坑：
- 用
<div class="header"> 替代 <code><header></header>——屏幕阅读器无法识别结构层级 - 导航塞进
<div id="menu"> 而非 <code><nav></nav>，折叠菜单时易漏掉aria-expanded状态 - 核心按钮、主表单写在 HTML 靠后位置——某些移动浏览器或辅助技术可能默认隐藏“次要内容”
- 过度嵌套
<div>，导致 CSS 必须用 <code>position: absolute或flex-direction: column-reverse补救，极易在小屏错位图片和表格必须做设备级适配，不能只靠 max-width: 100%
img { max-width: 100%; height: auto; }只防撑破容器，不解决带宽浪费、高清屏模糊、小屏溢出三大问题。关键动作：
- 图片必须用
srcset+sizes：例如<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 768px) 100vw, 50vw" alt="HTML响应式模板如何提升移动端易用性" > - 表格在移动端极难搞：必须设
table-layout: fixed，并配合<col width="200">或 CSScol { width: 200px; }，否则列宽由内容撑开，必横向滚动 - 小屏优先场景下，考虑用
<details><summary></summary></details>折叠长表格，或直接改用语义化列表替代
真机测试环节最容易被跳过：iOS 键盘弹出时视口压缩、安卓 WebView resize 不触发、折叠屏展开后宽度突变——这些都得在对应设备上手动点开、输入、旋转、滑动才能暴露出来。
- 图片必须用
