很多站点在电脑上看着規整，到了手机上却是另一回事：導航折叠後找不到入口，正文里的表格横向溢出，彈窗盖住半個屏幕。移動端适配不只是前端的事，它直接影响用戶能不能讀完一篇内容，也影响搜尋引擎爬虫看到的頁面版本。這份清單适合在改版、換模板或新栏目上线後過一遍。
為什么移動端要單獨查一遍
常见做法是“桌面端先做完，再顺手适配一下手机”。問题在于移動端的约束條件完全不同：屏幕窄、網絡慢、輸入靠手指。桌面端能用的一些设計，比如多列布局、悬浮侧栏、鼠标悬停展開的菜單，在移動端要么失效，要么變成负担。
另外，搜尋引擎抓取时通常會以移動端版本為主来判断頁面内容。如果移動端把大段文字預設折叠、靠脚本才展開，或者干脆隐藏了正文，抓取到的内容可能和你自己在桌面看到的並不一致。
自查清單
1. 视口與布局断点
- 頁面是否声明了 viewport，且没有加上禁止缩放之類的限制。
- 把浏览器窗口從宽到窄拖動，观察在哪些宽度開始错位，重点看 360px、390px、768px 附近。
- 是否存在固定宽度的容器，導致窄屏出現横向滚動條。
- 表格、代碼块、超長英文地址這類“硬骨头”是否做了横向滚動或換行處理。
2. 移動端被隐藏的内容
這是最容易被忽略的一類問题。為了“看着简洁”，有些模板會用样式把某些模块在移動端隐藏，而里面恰好放着關键信息。
- 列出所有在移動端被隐藏的区块，逐個判断是否包含正文、參數、價格、联系方式等核心内容。
- 如果确實需要收起，優先用可展開组件把内容保留在 DOM 里，而不是直接删掉或隐藏。
- 检查是否做了移動端與桌面端两套地址，两套地址呈現的内容應当一致。
3. 触摸操作與彈窗
- 按钮和連結的可点击区域是否够大，相邻連結之間是否容易誤触。
- 下拉菜單、汉堡菜單展開後能否正常收起，收起後是否残留遮罩层挡住頁面。
- 订阅彈窗、客服浮窗、Cookie 提示是否在首屏就占满屏幕，影响阅讀。
- 表單輸入时键盘彈出，輸入框會不會被键盘顶出可视区域。
4. 图片、字体與加载
- 图片是否按屏幕宽度自适應，有没有把几千像素宽的大图直接塞進列表頁。
- 首屏图片是否声明了宽高尺寸，避免加载過程中的布局跳動。
- 正文字号是否過小、行高是否過密，長段落在小屏上是否难讀。
- 在弱網环境下打開一個典型内容頁，看首屏多久能出現可讀内容。
怎么落地更省事
不必每次全站翻一遍，可以按優先級来：先固定检查几個模板頁——首頁、栏目頁、内容詳情頁、搜尋结果頁、表單頁，這几類覆盖了大多數訪問路径。改版或換模板後，把這些頁面在真机上都点一遍，比在模拟器里拖窗口更容易發現彈窗、键盘遮挡這類問题。
也可以把上面的检查項整理成一份發布前清單，挂在測試环境入口，谁發布谁過一遍，出問题的概率會低不少。
提醒：移動端适配没有“彻底做完”的那天，新模板、新组件、新广告位都可能破坏原有布局。定期抽查比一次性大改更現實。
寫在最後
移動端自查的目的不是把頁面做得花哨，而是保證用戶和爬虫拿到的是同一份、完整可讀的内容。先解决横向滚動、内容被隐藏、彈窗挡屏這三類最容易踩的坑，剩下的细节可以慢慢優化。