触控目标尺寸
手指不是鼠标光标。移动端可点击区域太小是最高频的 UX 失误，直接导致用户误触和放弃操作。
最小触控区域
视觉上按钮可以更小，但可点击区域必须至少 44px 高、44px 宽。用 CSS padding 扩展点击区域，而不是把视觉按钮做大。
最小触控区域
Google 的标准略大于 Apple。两个标准都认同：与相邻可点击元素间距至少 8px，防止用户点错目标。
Critical最高频违规场景
汉堡菜单关闭按钮、面包屑链接、购物车图标、社交分享按钮 — 这四类是触控区域最常不达标的地方。
Watch Out相邻元素最小间距
相邻两个可点击目标之间，物理间距至少 8px。最常出问题：数量加减按钮、轮播点点导航、价格旁边的操作按钮。
Critical对比 Mockup
Bad — 触控区太小
height 提升至 44px，padding 增加到 12px 上下。字体排版规范
字体大小不只是美观问题 — 16px 是浏览器的「自动缩放临界值」，低于它会触发 iOS Safari 的自动放大行为。
<input> 的 font-size 低于 16px，用户点击输入框时 iOS 会自动放大整个页面。解决方案：所有输入框字体 ≥ 16px。text-transform: uppercase 用于短标签（「NEW」「SALE」）没问题，但整段说明文字用全大写会大幅降低阅读速度。移动端阅读条件本就不好，全大写段落几乎无法快速浏览。Bad — 行高太窄 / 字号层级混乱
Good — 正确字号层级 + 舒适行高
Bad — 极细字重在安卓低端机
Good — 安全字重范围
行高建议
正文行高 1.5 是最低安全值，建议 1.6–1.7。标题可收窄到 1.1–1.2，段落绝对不能低于 1.4。
Recommended轻字重的风险
Ultra Light / Thin 字重在低 PPI 安卓机上会变成模糊细线，几乎不可读。font-weight: 300 可以接受，不要更细了。
Watch Out间距与边距规范
间距决定了页面的「呼吸感」。移动端的核心挑战是在小屏幕上保持清晰的视觉层级。
Bad — 无边距，内容贴边
Good — 16–20px 边距
8 倍数间距系统
所有间距值使用 8 的倍数（小间距用 4 的倍数）。产生统一的节奏感，方便开发者沟通。
Best Practice刘海屏/底部安全区
iPhone X 以上机型有底部 Home 指示条，固定底部导航/购物车栏需要加 padding-bottom: env(safe-area-inset-bottom)，否则按钮会被遮住。
颜色对比度
在户外强光、地铁摇晃中看手机，低对比度文字会直接消失。WCAG 给出了可量化的最低标准。
正文文字
小于 18px 正文（或小于 14px bold）必须达到 4.5:1。大多数国家无障碍法规要求的基准。
WCAG AA大号文字 / 标题
18px+ 常规字重或 14px+ 粗体可放宽到 3:1。电商转化场景建议标题也保持 4.5:1。
WCAG AA如何测量
contrastchecker/
输入前景色和背景色 hex 值，即可获得对比度比例。Chrome DevTools 也内置了对比度检查（点击颜色色块）。
Free Tool图片内嵌文字
用 imagecolorpicker.com 上传图片，分别取「文字颜色」和「文字背景颜色」的 hex，再到对比度检测工具验证。图片背景若非纯色，取最浅处背景验证。
Special CaseBad — 对比度不足
Good — 高对比度
响应式断点
断点决定了网页在什么宽度「切换」布局。你的主题用了自定义断点，与行业惯例不同。
<480
480–768
768–1024
max-md: 变体，但配置了自定义断点 1200px（75rem），而不是行业惯用的 768px。这意味着 768px 到 1200px 之间（平板、小屏 Mac）都走移动端样式。这是之前 Hero 按钮 Tailwind 类失效的根源。
Bad — 桌面布局硬塞进手机宽度
Good — 断点切换为单列移动端布局
必测的三个宽度
iPhone SE (375px), iPhone 14 (390px), iPhone 14 Plus (428px)。覆盖 80% 以上 iOS 用户。Android 主流宽度 360–412px，也在此区间内。
Test Plan与开发沟通断点
不要说「移动端下面」，要说「在 375px 到 768px 之间」。含糊的描述是最常见的沟通失误来源，开发者不知道该写哪个 breakpoint。
Communication交互细节
几个容易被忽视的移动端交互规范，每一个都直接影响用户的操作感受。
消除 300ms 点击延迟
移动浏览器为了区分「点击」和「双指缩放」，默认等 300ms 再响应点击。设置 touch-action: manipulation 或正确配置 viewport meta 可消除。延迟会让按钮感觉「反应迟钝」。
Hover 不是移动端的信息载体
桌面端的 :hover 工具提示在手机上完全不存在。如果某个说明、价格明细、尺寸信息只有 hover 才能看到，手机用户永远看不到它。信息必须默认可见，或有明确的点击触发方式。
横向滚动是 Bug，不是功能
页面出现意外横向滚动条，99% 是某个元素宽度超出 viewport。快速排查：* { outline: 1px solid red } 可视化所有元素边界，找到溢出元素。
Flex 子项默认不收缩
Flexbox 默认 min-width: auto，意味着内容不会自动换行收缩，很容易在小屏幕撑破容器。给 flex 子项加 min-width: 0 或 overflow: hidden 可解决。这是移动端「内容超出」最常见的技术原因。
禁止固定高度容纳文字
含文字的元素不能用 height，必须用 min-height。文字翻译后会变长（德语/西语长 20–35%），固定高度会截断内容。按钮高度可以固定，因为按钮文字通常可控。
禁止禁用用户缩放
禁止用户缩放页面会让视力不好的用户无法阅读内容，WCAG 明确要求不得禁止。iOS 16+ Safari 已强制忽略这个设置，Android 仍有效 — 不要写 maximum-scale=1。
Bad — 关键信息只在 hover 时显示
Good — 信息默认可见，或有明确点击展开
✓ Basic transcription
✓ 1 device
✓ AI speaker tagging
✓ 5 devices
Bad — Flex 溢出导致横向滚动
min-width: 120px，三张卡片总宽度超出 375px 屏幕，撑出横向滚动条。用户会以为页面坏了。Good — flex-wrap 或 grid 自动换行
grid-template-columns: 1fr 1fr，两列自适应宽度，无论屏幕多宽都不会溢出。内容更整齐，阅读更高效。页面性能
性能是隐形的 UX。加载慢不只是烦人 — Google 的 Core Web Vitals 直接影响搜索排名，而移动端网络比桌面端慢得多。
Hero 图片优化
Hero 区域图片通常是 LCP 元素。加 loading="eager" + fetchpriority="high" 让浏览器优先加载。格式用 WebP（体积比 JPG 小 25–34%）。Shopify 正确写法是用 Liquid filter：{{ image | image_url: width: 375 }}，不要用旧版 URL 参数 _375x（Dawn OS 2.0 已弃用）。在 .liquid 文件里通过 image_tag filter 传入 loading: 'eager', fetchpriority: 'high' 参数。
图片不压缩是最大杀手
移动端按 375px 显示的图片，如果上传的是 3000px 宽 JPG，浏览器下载完整文件再缩小 — 浪费几十倍流量。Shopify 支持 image_url: width: 375 filter 自动输出正确尺寸。
视频自动播放三件套
iOS Safari 默认禁止自动播放有声视频。要在 iPhone 上静音自动播放，必须同时加这三个属性。缺少 playsinline 会在 iPhone 上弹出全屏播放器，破坏页面布局。
图片必须声明宽高
图片加载前没有声明尺寸，加载完成后会撑开页面导致内容跳动（CLS 差）。给所有 <img> 加 width 和 height 属性，浏览器提前预留空间。
表单与输入
表单是转化的最后一步。移动端表单有几个独特的规范，违反任何一条都会大幅提高放弃率。
Bad — 只用 placeholder 代替 label
Good — Label 在上方，placeholder 为辅助
键盘类型 — 正确的 input type / inputmode
输入框最小高度
同触控目标原则。输入框点击区域也必须够大，否则用户难以准确点中。加 padding: 12px 16px 自然达到 44px 高度同时改善可读性。
开启自动填充
给输入框加 autocomplete="email"、autocomplete="name" 等属性，让浏览器/iOS 自动填充已保存的信息，大幅减少手机键盘输入量，提升结账转化率。
多语种排版规范
日语、德语、西班牙语都有专属的排版规范。英文设计师照搬英文规范到其他语种，是很多国际化页面翻车的根源。
width: 106px 的按钮在德语版会截断文字。所有按钮必须用 min-width + 自动撑开，或允许换行。Bad — 固定宽度按钮遇到德语
Good — min-width 自动撑开
| 语言 | 关键规范 | 具体要求 | 如果忽略 |
|---|---|---|---|
| 日语 | 最小字号 | ≥ 14px（建议 15–16px）。日文汉字笔画密集，比英文需要更大字号才能清晰。 | 字符模糊不可读，尤其低 PPI 设备 |
| 日语 | 行高 | 1.7–1.9（比英文 1.5 更大）。日文字符高度接近，行间没有天然空隙。 | 文字密成一块，视觉极度不适 |
| 日语 | 断字规则 | 用 line-break: strict 处理标点禁则（句号、括号不能出现在行首）。 |
悬挂标点，日本用户觉得极度业余 |
| 日语 | 禁用 word-break: break-all | 这个属性对英文有用，对日文会在错误位置断字，语义被切断。 | 词义被截断，不可读 |
| 德语 | 长单词断词 | 加 hyphens: auto + HTML 标签设 lang="de"。「Datenschutzerklärung」一个词能撑破移动端容器。 |
横向滚动条，布局破版 |
| 德语 | 内容长度 +30% | 所有容纳文字的容器用 min-height，按钮用 min-width，绝不写死尺寸。 |
文字截断，CTA 不完整 |
| 德语 | Eszett 大写 | 对德文用 text-transform: uppercase 前，确认字体支持 ẞ，否则 ß → SS，词义改变。 |
语义错误，专业度受损 |
| 西语 | 内容长度 +20% | 同德语原则，用弹性宽度。「Subscribe」→「Suscribirse」，「Free Shipping」→「Envío gratuito」。 | 按钮文字截断或换行破坏布局 |
| 西语 | 倒置标点 ¡ ¿ | 检查这两个字符在所用字体中的渲染高度，确认与首行其他字符对齐。 | 首行视觉错位，段落开头有「漂浮感」 |
| 所有语言 | lang 属性 | <html lang="ja"> / lang="de"> 必须随页面语言切换。影响断词、引号、hyphens 是否生效。 |
所有 CSS 断词规则全部失效 |
| 所有语言 | 图片内嵌文字 | 图片里的文字无法本地化。英文图片出现在日语页面上，品牌感和信任感受损。图文必须分离，文字用 HTML 叠加。 | 英文内容混入多语种页面 |
| 所有语言 | 字体字符集 | Google Fonts 默认只加载 Latin 字符集。日语需要单独加载日文字体（文件体积大，需 font-display: swap）。 | 日语回退到系统字体，品牌感消失 |
无障碍 & 边缘情况
无障碍不只是服务残障用户 — 老年人、弱视用户、户外强光下的普通用户都会受益。这些规范同时也是很多国家的法律要求。
系统字体放大 200% 不破版
用户在系统无障碍设置里调大字体（老年用户常用），好的布局用相对单位自动适配。验证：Chrome DevTools → Rendering → Font size → 调到 200%，检查是否有文字溢出容器。
A11y深色模式适配
如果没有专门适配深色模式，至少在 <meta> 或 CSS 里声明 color-scheme: light，防止浏览器自动反转颜色导致白底白字（完全不可读）。
图片 alt 文字
所有产品图片必须有有意义的 alt 属性。装饰性图片用 alt=""（空值，屏幕阅读器跳过）。Shopify 在后台上传图片时可以填写 alt 文字。
键盘焦点样式
很多设计师为了「好看」移除了 :focus 样式。这让使用键盘或辅助技术的用户完全看不出焦点在哪里。可以自定义焦点样式，但不能移除。
横屏模式不破版
将手机旋转到横屏，检查 Hero 高度是否过高挡住内容，固定底部元素是否占用太多屏幕空间。Hero 用 min-height 而非 height: 100vh 可避免横屏时全屏被占满。
为 RTL 语言预留
现在用逻辑属性（margin-inline-start 而非 margin-left），未来支持阿拉伯语/希伯来语时只需加一行 dir="rtl"，不需要重写所有间距规则。
Bad — 移除了焦点样式 (outline: none)
outline: none 去掉浏览器默认焦点框。键盘用户 Tab 切换时看不出当前焦点在哪个元素上，完全无法操作。Good — 自定义清晰的焦点样式
:focus-visible 样式：2px 深色实线描边 + 2px offset，既符合品牌视觉，又让键盘用户清晰看到当前位置。Bad — 固定 px 单位，字体放大后溢出
height: 32px 固定。系统字体放大到 150% 后，文字超出容器被截断。老年用户或弱视用户常开启大字体。Good — rem 相对单位，随系统字体自动缩放
min-height + padding: 0.5em 0.75em，容器随字体大小自动伸展。字体放大后文字自然换行，不截断。移动端上线 Checklist
每次推送新版本前，用这份清单过一遍。点击条目标记为已检查。A = 必须，B = 强烈建议，C = 加分项。
* { outline: 1px solid red } 可视化所有元素边界。padding-bottom: env(safe-area-inset-bottom)，防止 Home 指示条遮挡按钮。<html lang="ja">、lang="de">、lang="es">。影响断词、引号、hyphens 是否生效。