移動端适配经常被当成“前端的事”，但對站点运营来说，它决定的是訪客能不能顺畅看完一篇文章、能不能顺利点開下一個栏目。很多站点在电脑上检查一切正常，換到手机上却出現横向滚動、文字挤成一條、按钮点不中，甚至部分内容被直接隐藏。這份自查清單按“看得见、点得動、内容全”三個维度排列，适合改版後或每隔一段時間跑一遍。
一、先確認 viewport 與初始缩放
viewport 是移動端排版的地基。如果缺少這一行声明，浏览器會按桌面宽度渲染再整体缩小，结果就是字体小到需要放大才能讀。
- 確認頁面头部存在 viewport 声明，宽度為设备宽度。
- 不要把初始缩放鎖定在小于 1 的值，那等于預設禁止用戶放大。
- 不要同时設定最大缩放為 1，這會挡住视力不佳的訪客。
二、检查横向滚動與固定宽度
手机上出現左右滑動，通常来自某個固定宽度的容器、超宽图片或表格。自查时可以在手机浏览器上慢慢左右拖動，看頁面是否整体位移。
- 找出所有寫死像素宽度的模块，改成百分比或自适應單位。
- 检查表格與代碼块，必要时让它們在自身容器内滚動，而不是撑開整頁。
- 检查图片是否設定了最大宽度限制。
横向滚動看起来只是体驗瑕疵，實际會连带影响点击准确率和内容讀取顺序，值得当成明确的問题處理。
三、字号、行距與点击区域
移動端阅讀距离更近，但屏幕更小，字号過小和行距過密都會让人快速离開。
- 正文字号保持在不需放大即可阅讀的水平，行距留出呼吸空間。
- 導航、按钮、翻頁等可点击元素留出足够的触控面积，並保持間距，避免誤触。
- 下拉菜單不要在手机上依赖悬停触發，触屏没有悬停狀態。
四、媒体资源與加载顺序
图片和视频往往是移動端最重的部分。自查重点不是把图压到最小，而是让首屏尽快可用。
- 為大图設定合理的展示尺寸，避免用一張超大原图缩小顯示。
- 懒加载不要用在首屏主图上，否則會出現明顯的空白等待。
- 检查视频與嵌入内容是否自動播放、是否抢占带宽。
五、内容一致性：別在手机上藏東西
有些站点為了“简化”移動端，用样式把正文、内鏈或導航整块隐藏。這種做法對訪客和搜尋引擎都不友好。
- 核對桌面端與移動端展示的正文内容是否一致。
- 確認重要内鏈和栏目入口在移動端依然可達。
- 如果确實需要折叠，确保展開後内容完整可见，而不是彻底不渲染。
六、真机與工具交叉驗證
只靠浏览器缩小窗口模拟，容易漏掉真實设备的差异。建议至少做两轮驗證：一轮用開發者工具的移動模拟，快速排查布局問题；一轮用真實手机，检查滚動、点击、表單輸入和網絡較慢时的表現。两端结果不一致的地方，往往就是問题所在。
七、把自查變成固定動作
移動端适配不是一次性任務。模板調整、插件更新、广告位新增，都可能重新引入問题。可以把上面的检查項整理成一份简短清單，在每次改版上线前和季度巡检时各跑一遍，记錄發現的問题與處理方式。這样做的價值不在于追求某個分數，而在于让訪客無论用什么设备打開，都能看到你想让他們看到的内容。