訪客里用手机打開頁面的比例往往過半，抓取端也早就按移動端為主来评估頁面。桌面端看着整齐的版式，到了小屏上可能按钮点不到、彈窗盖住正文、表格撑出横向滚動條。這類問题不需要多高深的技術，但會直接影响停留、点击和下一步轉化。下面這份自查清單，适合放在改版前後和日常巡检里逐條過一遍。
先從真机開始，而不是只看模拟器
浏览器開發者工具的设备模拟很好用，但它替代不了真机。模拟器不會表現出系統字体放大、輸入法遮挡、刘海屏安全区域這些细节。
- 用两三台不同尺寸的真机打開首頁、栏目頁、詳情頁各一個，走一遍完整路径。
- 把系統字体調到最大档，看文字有没有被截断、按钮有没有溢出。
- 把浏览器视口調到 320px 宽，观察是否出現横向滚動條。
發現的問题记下来，按影响面排序，先修入口頁和轉化頁。
视口声明與基础布局
頁面头部里的视口声明是移動端布局的地基，這一條出错，後面的調整都容易白費。
- 是否寫了 width=device-width, initial-scale=1。
- 有没有為了迁就舊頁面而鎖死缩放，導致用戶想放大文字都放不了。
- 容器是不是用了固定像素宽度，改成 max-width 配合百分比或彈性布局更稳妥。
- 浮動、绝對定位的元素在小屏下是否互相重叠。
文字可讀性與点击区域
手机上讀長段落本来就費劲，字号和間距再抠，用戶很容易直接登出。
- 正文字号建议不低于 16px，行高留足，中文長段落尤其要控制每行字數。
- 連結、按钮的可点击区域建议不小于 44×44 像素，相邻元素之間留出間距。
- 不要只靠颜色区分連結，最好配上下划线或其它视觉提示。
- 表格、代碼块這類宽内容，單獨做横向滚動容器，別让整個頁面跟着滚。
遮挡與干扰：彈窗、横幅和悬浮按钮
移動端屏幕小，任何固定悬浮的元素都會吃掉可见面积。常见的問题有：
- 一進頁面就彈出的订阅或通知彈窗，直接盖住首屏内容，關閉按钮還特別小。
- 底部固定的咨询條、返回顶部按钮，把最後一屏正文压住。
- 顶部公告條和導航层层叠加，實际内容区只剩一半。
建议彈窗延後触發，關閉入口足够大且位置固定；悬浮元素上下一共保留一條，並且不要遮挡正文底部。
移動端的問题很少是技術难题，更多时候是没人用真机從头到尾認真走一遍。
图片、视频與字体
- 图片設定宽度 100%、高度自動，避免撑破容器；同时标注宽高比，减少加载时的跳動。
- 首屏大图按设备選擇合适尺寸，不要让手机去加载桌面端的大图。
- 自動播放的视频保持静音，並且不要占满首屏。
- 自定义字体的回退方案要测過，避免文字長時間不可见。
移動端與桌面端的内容對應
有人為了“移動端简洁”，把正文後半段、相關推荐或联系方式直接隐藏。用戶看不到，抓取端往往也拿不到，容易造成两端内容不一致。
- 两端尽量輸出同一套核心内容，差异放在展現方式上。
- 如果确實需要分開的地址，做好對應關系声明，別让两邊各自為政。
- 用隐藏样式藏起来的内容，不要指望它還能被正常抓取和评估。
一份可以照着做的自查清單
- 真机打開首頁和两個主要落地頁，完整走一遍点击路径。
- 把系統字体調大，检查截断和溢出。
- 在 320px 宽度下確認没有横向滚動。
- 核對视口声明和缩放限制。
- 检查按钮、連結的点击区域與間距。
- 清点所有彈窗和悬浮條，確認不遮挡正文、關閉入口明顯。
- 检查图片、视频在移動網絡下的加载表現。
- 對比两端内容是否一致，有没有單邊隐藏。
把巡检固定下来
移動端适配不是一次性的工作。模板改動、新增组件、接入第三方脚本之後，都要回头再看一遍。把上面几條做成固定巡检項，發現問题按優先級處理，比等到資料下滑再去猜原因要省事得多。