很多站点的移動端流量早就不低于桌面端,但适配這件事往往被排在最後。栏目加了、模板換了、活動頁上线了,真正拿手机從头走一遍流程的人却不多。结果是桌面端看着没問题,手机上一堆横向滚動、按钮点不到、彈窗挡住正文。這些問题不一定會被工具标红,却會直接影响訪客停留和後續抓取。
先確認訪客和蜘蛛看到的是同一版頁面
如果站点用過 m. 子域名或獨立移動站,要特別留意两版内容是否一致。常见情况是移動版少了部分栏目、正文被截断、參數或者评论区缺失,而跳轉又依赖 User-Agent 判断。搜尋引擎的移動優先索引以移動版内容為准,移動版里缺的栏目,在移動端基本就等于不存在。
- 用手机 UA 抓一次頁面,對比桌面版和移動版返回的 HTML 主体内容,重点看标题层級和正文長度。
- 使用獨立移動域名的,確認两版之間的互相指向声明完整,別一邊寫了另一邊漏了。
- 避免在移動端用脚本動態删掉大段内容,尤其是正文後半段和结构化資料部分。
viewport、字号與点击区域
viewport 没设好,頁面在手机上就是被缩小的桌面版。這類問题在模板改版後最容易出現:桌面样式調好了,meta 却忘了改回来。
- 確認 viewport 使用 width=device-width, initial-scale=1,而不是寫死一個固定宽度。
- 正文字号和行高在手机上是否可讀,有没有必须双指放大才能看清的段落。
- 按钮、導航項、分頁連結的点击区域是否足够大,相邻連結之間有没有留出間距。
- 表單輸入框聚焦彈出键盘时,會不會遮住提交按钮,用戶能不能顺手完成操作。
首屏遮挡:彈窗、插屏和固定横幅
打開頁面先彈 App 下载、先彈订阅、先彈優惠券,内容還没看到就被遮住一半。移動端屏幕本来就小,遮挡带来的挫败感比桌面端更强。建议把彈窗的触發时机往後放,或者至少保證關掉之後一段時間内不再重复彈出。
- 检查首屏是否有大面积浮层,正文和主入口是否還能直接看到。
- 確認關閉按钮足够大、位置固定,不會因為頁面滚動而跑到屏幕之外。
- 底部固定悬浮條是否會盖住頁面尾部的連結和分頁。
图片、表格與横向滚動
横向滚動是移動端体驗最明顯的减分項。它通常不是设計問题,而是某些元素没有跟着屏幕收缩。
- 图片是否設定了宽度上限,宽图會不會把整個頁面撑開。
- 資料表格在窄屏下如何處理,是改成卡片式展示,還是限制在容器内單獨横向滚動。
- 代碼块、長英文連結和连續英文單词是否能正常断行。
- 嵌入的视频、地图、第三方组件是否有固定高度和自适應宽度。
被折叠和被隐藏的内容
手風琴、标簽頁、展開全文這類交互,本身没問题,關键看内容是怎么来的。如果内容一開始就在 HTML 里,只是用样式折叠,通常還能被讀到;如果是点击之後才异步插入,那就得考虑預設狀態下是否有可抓取的内容。
- 折叠区域里的正文和連結,是否出現在初始 HTML 中。
- 标簽頁切換的内容,有没有全部保留在頁面上。
- 移動端专用的精简模板,是否把導航和分類入口一起精简掉了。
一份可以照着走的自查清單
- 用真實手机打開首頁、栏目頁、詳情頁各一個,完整走一遍浏览路径。
- 检查上述頁面的 viewport、字号、点击区域和遮挡情况。
- 用手机 UA 抓取頁面,對比移動版與桌面版的主体内容差异。
- 检查移動端是否有多余的重定向或跳轉鏈路。
- 把發現的問题按影响程度排序,先修正文、入口和表單,再處理装饰性問题。
移動端自查不必一次改完。先把影响阅讀和操作的問题解决掉,剩下的细枝末节可以排進後續迭代,關键是別让它一直躺在待办列表里。
移動端适配不是一次性的項目,而是跟着模板、活動和内容一起變化的日常维護。隔一段時間用手机重新走一遍站点,往往能發現工具报表里看不到的問题。