不少站点的移动端流量已经超过桌面，但日常更新时，多数人还是坐在电脑前看页面。问题往往是这样积累起来的：某次改版把一段内容塞进卡片，桌面看着没问题，手机上却被挤到屏幕外；某个浮层在手机上正好盖住了正文的入口。移动端自查的意义，就是在访客抱怨之前，先把这些细节过一遍。
先确认视口和基础布局
第一步永远是 viewport。没有它，浏览器会按桌面宽度渲染再整体缩放，字会变得很小。
- 检查页面头部是否有 viewport 设置，宽度为 device-width，初始缩放为 1。
- 确认没有用禁止缩放的写法锁死页面，这会挡住需要放大阅读的用户。
- 在窄屏下看有没有整体横向滚动条，通常意味着某个元素固定了超出屏幕的宽度。
文字、按钮与点击区域
手机上没有鼠标，手指的落点是模糊的。字号过小、行距过密、按钮挨得太近，都会让操作变得困难。
- 正文字号建议保持在 16px 左右，行高留出余量。
- 按钮和链接的点击区域不要小于约 44×44 像素，相邻元素之间留出间距。
- 检查浅色文字压在浅色背景上的情况，户外光线强时尤其明显。
图片与横向溢出
- 给内容区图片设置最大宽度 100%，避免撑破容器。
- 宽表格、长代码块在小屏上容易溢出，可以用横向滚动容器包住，而不是一味缩小字号。
- 嵌入的视频播放器和框架同样要检查宽度和比例。
弹窗、浮层与固定元素
客服浮窗、订阅提示、底部工具栏在手机上占据的比例远大于桌面。它们出现的位置如果压住了正文或关闭按钮，用户很难继续往下看。
- 确认关闭按钮可见且可点，不要藏在屏幕边缘。
- 浮层不要遮挡主要内容，尤其是首屏的关键信息。
- 检查浮层是否跟随滚动，是否在返回时反复弹出。
内容一致性：不要只对桌面说话
有人为了让手机页面看起来简洁，在样式里直接隐藏部分内容。这类做法需要格外小心。
- 被隐藏属性去掉的内容，通常不会被当作页面正文的一部分。
- 如果桌面和移动端展示的内容差异很大，要确认重要的说明、价格、联系方式在两端都能看到。
- 尽量让两端共用同一套地址，用响应式布局适配，而不是单独维护一个移动站。
地址与跳转
- 如果确实用独立的移动站，确认手机访问时有跳转，桌面访问也能回到主站，不要形成来回跳。
- 移动站地址不要带随机会话参数，否则同一页面会出现很多条记录。
- 跳转过程中尽量保持原有路径，方便对照排查。
怎么测比较靠谱
- 用浏览器开发者工具的设备模拟，快速过一遍常见尺寸。
- 再用真机走一遍关键路径：首页、栏目页、内容页、提交入口。
- 换一台小屏手机和一台大屏手机，问题常常只在其中一边出现。
- 拉慢网络看首屏，确认主要内容在没有等到全部资源时也能先读。
不必追求在每个尺寸上都完美，先把两件事确认下来：能不能正常读完一篇文章，能不能顺利点到自己想要的入口。
多久做一次
不必等到大改版才检查。模板或样式调整之后、新增一个栏目或浮层之后，花十几分钟过一遍清单就够了。把这几项固定成发布前的习惯，比事后一个个补要省事得多。