viewport标签必须放在最前面且唯一，仅用width=device-width, initial-scale=1.0；位置错误、动态插入、多标签或加user-scalable=no等均导致失效，引发缩放异常、文字模糊及横向滚动。

viewport 标签必须放在

最前面且只写一次

页面在手机上缩成一团、文字糊、左右可拖动，90% 是因为 没生效。浏览器按顺序解析 HTML，如果它被 JS 动态插入、或被框架 SSR 漏掉、或写在其他 后面，首次渲染就已按错误配置执行。

常见错误包括：

• 用 document.head.appendChild() 在 DOMContentLoaded 后补写——iOS Safari 直接忽略
• 里写了两次，后一个覆盖前一个，但首屏已崩
• 写成 width=375 或 width=1200 这类固定值——折叠屏、iPad 分屏、横屏键盘弹出时全失效

最简有效写法只有一行：。别加 user-scalable=no 或 maximum-scale=1.0，它们既不真正禁用缩放，又违反 WCAG 可访问性要求。

触摸目标必须 ≥ 48×48 CSS 像素

移动端不是“缩小版桌面”，手指点击精度远低于鼠标。所有可操作元素（按钮、链接、表单项、图标）的点击区域必须满足最小尺寸，否则屏幕阅读器用户和普通用户都会误触或点不中。

实操要点：

• 不要只靠 padding 或 font-size 勉强撑大，要确保整个 hit area（含内边距+边框）≥ 48×48px
• 避免密集排列，相邻可点击元素间距至少 8px，给手指“呼吸空间”
• 用 关联表单控件，扩大点击范围； 等小控件务必包裹
• 禁用 touch-action: manipulation 以外的手势拦截，否则 VoiceOver/TalkBack 手势会失效

语义化 HTML 结构决定内容流是否可靠

响应式不是靠 CSS 强行“重排”，而是靠 DOM 顺序天然适配垂直堆叠逻辑。移动端没有横向空间奢侈，所有内容最终要按 HTML 顺序从上到下读取。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

容易踩的坑：

• 用
  替代

  ——屏幕阅读器无法识别结构层级
• 导航塞进
  而非

  ，折叠菜单时易漏掉 aria-expanded 状态
• 核心按钮、主表单写在 HTML 靠后位置——某些移动浏览器或辅助技术可能默认隐藏“次要内容”
• 过度嵌套
  ，导致 CSS 必须用 position: absolute 或 flex-direction: column-reverse 补救，极易在小屏错位

  图片和表格必须做设备级适配，不能只靠 max-width: 100%

  img { max-width: 100%; height: auto; } 只防撑破容器，不解决带宽浪费、高清屏模糊、小屏溢出三大问题。

  关键动作：

  • 图片必须用 srcset + sizes：例如
  • 表格在移动端极难搞：必须设 table-layout: fixed，并配合 或 CSS col { width: 200px; }，否则列宽由内容撑开，必横向滚动
  • 小屏优先场景下，考虑用
    折叠长表格，或直接改用语义化列表替代

  真机测试环节最容易被跳过：iOS 键盘弹出时视口压缩、安卓 WebView resize 不触发、折叠屏展开后宽度突变——这些都得在对应设备上手动点开、输入、旋转、滑动才能暴露出来。