访客里用手机打开页面的比例往往过半，抓取端也早就按移动端为主来评估页面。桌面端看着整齐的版式，到了小屏上可能按钮点不到、弹窗盖住正文、表格撑出横向滚动条。这类问题不需要多高深的技术，但会直接影响停留、点击和下一步转化。下面这份自查清单，适合放在改版前后和日常巡检里逐条过一遍。
先从真机开始，而不是只看模拟器
浏览器开发者工具的设备模拟很好用，但它替代不了真机。模拟器不会表现出系统字体放大、输入法遮挡、刘海屏安全区域这些细节。
- 用两三台不同尺寸的真机打开首页、栏目页、详情页各一个，走一遍完整路径。
- 把系统字体调到最大档，看文字有没有被截断、按钮有没有溢出。
- 把浏览器视口调到 320px 宽，观察是否出现横向滚动条。
发现的问题记下来，按影响面排序，先修入口页和转化页。
视口声明与基础布局
页面头部里的视口声明是移动端布局的地基，这一条出错，后面的调整都容易白费。
- 是否写了 width=device-width, initial-scale=1。
- 有没有为了迁就旧页面而锁死缩放，导致用户想放大文字都放不了。
- 容器是不是用了固定像素宽度，改成 max-width 配合百分比或弹性布局更稳妥。
- 浮动、绝对定位的元素在小屏下是否互相重叠。
文字可读性与点击区域
手机上读长段落本来就费劲，字号和间距再抠，用户很容易直接退出。
- 正文字号建议不低于 16px，行高留足，中文长段落尤其要控制每行字数。
- 链接、按钮的可点击区域建议不小于 44×44 像素，相邻元素之间留出间距。
- 不要只靠颜色区分链接，最好配上下划线或其它视觉提示。
- 表格、代码块这类宽内容，单独做横向滚动容器，别让整个页面跟着滚。
遮挡与干扰：弹窗、横幅和悬浮按钮
移动端屏幕小，任何固定悬浮的元素都会吃掉可见面积。常见的问题有：
- 一进页面就弹出的订阅或通知弹窗，直接盖住首屏内容，关闭按钮还特别小。
- 底部固定的咨询条、返回顶部按钮，把最后一屏正文压住。
- 顶部公告条和导航层层叠加，实际内容区只剩一半。
建议弹窗延后触发，关闭入口足够大且位置固定；悬浮元素上下一共保留一条，并且不要遮挡正文底部。
移动端的问题很少是技术难题，更多时候是没人用真机从头到尾认真走一遍。
图片、视频与字体
- 图片设置宽度 100%、高度自动，避免撑破容器；同时标注宽高比，减少加载时的跳动。
- 首屏大图按设备选择合适尺寸，不要让手机去加载桌面端的大图。
- 自动播放的视频保持静音，并且不要占满首屏。
- 自定义字体的回退方案要测过，避免文字长时间不可见。
移动端与桌面端的内容对应
有人为了“移动端简洁”，把正文后半段、相关推荐或联系方式直接隐藏。用户看不到，抓取端往往也拿不到，容易造成两端内容不一致。
- 两端尽量输出同一套核心内容，差异放在展现方式上。
- 如果确实需要分开的地址，做好对应关系声明，别让两边各自为政。
- 用隐藏样式藏起来的内容，不要指望它还能被正常抓取和评估。
一份可以照着做的自查清单
- 真机打开首页和两个主要落地页，完整走一遍点击路径。
- 把系统字体调大，检查截断和溢出。
- 在 320px 宽度下确认没有横向滚动。
- 核对视口声明和缩放限制。
- 检查按钮、链接的点击区域与间距。
- 清点所有弹窗和悬浮条，确认不遮挡正文、关闭入口明显。
- 检查图片、视频在移动网络下的加载表现。
- 对比两端内容是否一致，有没有单边隐藏。
把巡检固定下来
移动端适配不是一次性的工作。模板改动、新增组件、接入第三方脚本之后，都要回头再看一遍。把上面几条做成固定巡检项，发现问题按优先级处理，比等到数据下滑再去猜原因要省事得多。