移动端优先不是缩小页面：390px、触控与中文换行实操

移动端优先是重新排序，不是整体缩小

把桌面页面按比例缩小，常见结果是字变小了，信息却仍然太多：五个导航入口挤成两行，三列表格每列只剩几个字，右侧操作按钮盖住正文。移动端设计要先决定在窄屏上什么最重要、什么可以折叠、什么必须改成另一种组件。 我通常从 390px 宽度开始，再补查 320px。390px 能代表常见手机阅读空间，320px 则容易暴露长英文、固定宽度和按钮最小宽度的问题。不要只拖动浏览器到看起来像手机的大小，要用真实视口和触控模拟检查。

先找出横向溢出的真正来源

页面能左右晃动时，不要立刻给 body 加 overflow-x: hidden。隐藏只会让超出的内容无法看见。用开发工具逐层检查 scrollWidth 大于 clientWidth 的元素，常见来源包括固定像素宽度、min-width 表格、未换行 URL、pre 代码块、绝对定位按钮和过大的内边距。 临时给所有元素加轮廓能快速定位：

* { outline: 1px solid rgba(255, 0, 0, .15); }

定位后删除调试样式。正文容器设置 max-width: 100%，图片使用 height: auto；代码和确实需要完整列的表格放在独立横向滚动容器，而不是让整页滚动。

中文标题要允许自然换行，但不能出现孤字

中文不会像英文那样只在空格处分词，因此过大的字号和过窄的标题容器很容易在最后一行留下一个字。先缩小移动端字号与行高，再适当扩大文字可用宽度。不要给标题固定高度，也不要为了强制两行在正文中插入 br；标题改一个字就会失效。 长英文产品名、邮箱和 URL 可使用 overflow-wrap: anywhere 作为兜底，但普通中文正文不建议全局使用 word-break: break-all，它会让英文单词在任意字符处断开。标题应在中文、英文和中英混排三种样本下测试。

表格在手机上要决定‘比较’还是‘查看记录’

两三列的比较表可以保留表格并允许横向滚动，第一列必要时固定；七八列的后台记录表在手机上更适合变成分组列表，每条记录用“字段名：值”排列。强行把八列压进屏幕，会造成日期、分类和状态互相覆盖，用户连完整文字都看不到。 后台桌面表格也要设列优先级：标题和操作保证可读，次要指标允许省略号并提供悬停或详情，日期禁止与相邻列重叠。min-width 应来自内容需要，而不是随手写一个总宽度。

触控目标和间距不能照搬鼠标界面

手机上的图标按钮如果只有 20px，视觉上精致，手指却很难准确点中。扩大可点击区域，按钮之间留出间距；不要只靠颜色区分状态，也不要把关键操作藏在只能悬停出现的菜单里。键盘焦点、屏幕阅读器名称与可见文字应保持一致。 表单输入框要使用合适的 input type，错误提示紧贴字段，并在提交后把焦点带到第一个错误。避免点击输入框时页面因为字体小于 16px 被浏览器自动放大，导致布局突然跳动。

一份实际验收顺序

1. 在 320px、390px、768px 和桌面宽度分别打开。
2. 从页面顶部滑到底，确认页面本身没有横向滚动。
3. 测试最长标题、最长 URL、最宽表格和最多按钮的真实数据。
4. 只用键盘完成导航与表单，观察焦点是否可见。
5. 把系统字号调大，确认内容不被固定高度裁切。
6. 在弱网下加载，确认图片占位不会造成按钮跳位。

移动端通过并不表示桌面端可以忽略。最后回到大屏检查正文行宽和留白，避免为了手机适配让桌面内容铺满整屏。下一篇继续处理首屏加载里最重的两类资源：网站图片与字体优化。