「做了响应式」不等于「手机上能用」。响应式解决的是栅格塌缩，剩下七八件事它管不到：按钮够不够大、字会不会太小、表格会不会横向溢出、输入框会不会被键盘挡住。移动端要按一份清单单独过一遍，而不是看一眼「没乱」就结束。
一、点击区域至少 44×44
手指比鼠标粗。小于 44 像素的链接和按钮，实际点中率会掉得很厉害，尤其是在页面底部。
检查方法：手机上看导航链接、页脚链接、分页按钮。如果两个链接间距小于 8 像素，很容易误点。
二、正文字号不小于 16 像素
低于 16 像素在手机上会自动触发缩放，或者读起来费劲。iOS 的输入框如果字号小于 16，聚焦时会强制放大页面，体验很跳。
三、不能有横向溢出
任何元素超宽，整页都能左右拖动，看着像坏了。常见原因：固定宽度图片、长 URL、宽表格、负边距装饰块。
四、表格要转成卡片
四列以上的表格在手机上没法读。可行做法是每行变成一张卡片，单元格前面带上字段名——用 CSS 的 ::before 配 data-label 就能实现，不需要额外 JS。
五、表单要考虑键盘
输入框聚焦后，弹出的键盘会挡住下半屏。提交按钮如果贴在输入框下面，就会被遮住。把表单字段数量压到最少，也是同一个道理。
六、首屏高度要留给结论
手机首屏只有五六百像素。标题、一句结论、一个按钮，就该占满。把公司简介、荣誉资质堆在首屏，等于把用户推走。
七、导航用抽屉，别挤压
桌面导航在手机上横向挤压成一排小字，是最常见的失败样式。折叠成抽屉，按钮固定在右上角，是成本最低的解。
八、图片裁切要预设比例
用 object-fit: cover 配固定比例，比让图片按原始尺寸缩放更稳。否则竖图会把卡片撑成一条。
这八条过完，再谈速度。首屏的加载优化见首屏加载。
一个页面的实测记录
拿一个典型的企业服务页，在 390 像素宽度下逐项过这八条，问题是这样的：
- 导航七项挤成一行小字，两处点击区域只有 28 像素高
- 正文实际字号 14 像素（设计稿写的是 16，被一个未生效的媒体查询覆盖了）
- 一张 1200 像素宽的产品图没有约束，整页可以左右拖
- 六列参数表横向溢出，看不到后三列
- 表单提交按钮被键盘遮挡一半
- 首屏是一张工厂全景图，标题在第二屏
六处里五处是样式问题，一处是内容顺序问题。全部修完用了一天，改的都是 CSS，没动结构。
这类问题在桌面端完全看不出来，所以移动端必须单独过一遍，而且要在真机上过——开发者工具的模拟器不会暴露键盘遮挡。