很多站点在电脑上看着规整，到了手机上却是另一回事：导航折叠后找不到入口，正文里的表格横向溢出，弹窗盖住半个屏幕。移动端适配不只是前端的事，它直接影响用户能不能读完一篇内容，也影响搜索引擎爬虫看到的页面版本。这份清单适合在改版、换模板或新栏目上线后过一遍。
为什么移动端要单独查一遍
常见做法是“桌面端先做完，再顺手适配一下手机”。问题在于移动端的约束条件完全不同：屏幕窄、网络慢、输入靠手指。桌面端能用的一些设计，比如多列布局、悬浮侧栏、鼠标悬停展开的菜单，在移动端要么失效，要么变成负担。
另外，搜索引擎抓取时通常会以移动端版本为主来判断页面内容。如果移动端把大段文字默认折叠、靠脚本才展开，或者干脆隐藏了正文，抓取到的内容可能和你自己在桌面看到的并不一致。
自查清单
1. 视口与布局断点
- 页面是否声明了 viewport，且没有加上禁止缩放之类的限制。
- 把浏览器窗口从宽到窄拖动，观察在哪些宽度开始错位，重点看 360px、390px、768px 附近。
- 是否存在固定宽度的容器，导致窄屏出现横向滚动条。
- 表格、代码块、超长英文地址这类“硬骨头”是否做了横向滚动或换行处理。
2. 移动端被隐藏的内容
这是最容易被忽略的一类问题。为了“看着简洁”，有些模板会用样式把某些模块在移动端隐藏，而里面恰好放着关键信息。
- 列出所有在移动端被隐藏的区块，逐个判断是否包含正文、参数、价格、联系方式等核心内容。
- 如果确实需要收起，优先用可展开组件把内容保留在 DOM 里，而不是直接删掉或隐藏。
- 检查是否做了移动端与桌面端两套地址，两套地址呈现的内容应当一致。
3. 触摸操作与弹窗
- 按钮和链接的可点击区域是否够大，相邻链接之间是否容易误触。
- 下拉菜单、汉堡菜单展开后能否正常收起，收起后是否残留遮罩层挡住页面。
- 订阅弹窗、客服浮窗、Cookie 提示是否在首屏就占满屏幕，影响阅读。
- 表单输入时键盘弹出，输入框会不会被键盘顶出可视区域。
4. 图片、字体与加载
- 图片是否按屏幕宽度自适应，有没有把几千像素宽的大图直接塞进列表页。
- 首屏图片是否声明了宽高尺寸，避免加载过程中的布局跳动。
- 正文字号是否过小、行高是否过密，长段落在小屏上是否难读。
- 在弱网环境下打开一个典型内容页，看首屏多久能出现可读内容。
怎么落地更省事
不必每次全站翻一遍，可以按优先级来：先固定检查几个模板页——首页、栏目页、内容详情页、搜索结果页、表单页，这几类覆盖了大多数访问路径。改版或换模板后，把这些页面在真机上都点一遍，比在模拟器里拖窗口更容易发现弹窗、键盘遮挡这类问题。
也可以把上面的检查项整理成一份发布前清单，挂在测试环境入口，谁发布谁过一遍，出问题的概率会低不少。
提醒：移动端适配没有“彻底做完”的那天，新模板、新组件、新广告位都可能破坏原有布局。定期抽查比一次性大改更现实。
写在最后
移动端自查的目的不是把页面做得花哨，而是保证用户和爬虫拿到的是同一份、完整可读的内容。先解决横向滚动、内容被隐藏、弹窗挡屏这三类最容易踩的坑，剩下的细节可以慢慢优化。