很多站点在桌面浏览器里看得很正常，一換到手机上就露馅：字小得要放大，按钮点不准，图片把版面撑出横向滚動條。移動端适配不是上线前做一次就完事的項目，而是站点运营里需要定期回头看的日常項。
為什么移動端适配值得單獨立一項自查
两個原因。第一，多數站点的移動端訪問占比已经不低，訪客体驗直接關系到停留时長和轉化。第二，搜尋引擎的抓取和渲染也越来越多地以移動端為基准，頁面在移動环境下如果渲染異常、内容缺失或者必须横向滚動才能看全，蜘蛛拿到的頁面质量自然會打折。
這里说的是改善体驗和可抓取性，不等于做完适配就一定有更好的展現，它只是把该做的基础工作补齐。
第一层：viewport 與基础布局
先看最容易被忽略的一行代碼。頁面头部缺少 viewport 声明时，手机浏览器會按桌面宽度渲染再整体缩小，结果就是所有文字一起變小。
- 是否有 viewport 声明，常規寫法是 width=device-width, initial-scale=1。
- 是否用 user-scalable=no 直接禁掉缩放，這會挡住需要放大阅讀的用戶，属于可訪問性問题。
- 是否给容器寫了固定像素宽度，比如 1200px，小屏上必然出現横向滚動。
- 是否用了彈性布局或栅格，而不是靠一堆 float 硬拼版面。
第二层：点击区域與文字可讀性
- 可点击元素太小：導航、按钮、分頁、關閉图标挤在一起，手指很容易点错。一般建议点击区域不小于 44×44 像素，相邻元素之間留出間距。
- 正文字号偏小：正文常见下限在 14 到 16 像素左右，辅助信息也不宜低于 12 像素。
- 行高過密：1.5 到 1.8 之間讀起来比較舒服，太紧會让人看着累。
第三层：图片、表格與代碼块
- 图片加 max-width:100% 並让高度自适應，避免撑破容器；條件允许时用 srcset 或按屏宽返回合适尺寸，別把桌面大图直接塞给手机。
- 宽表格放進可以横向滚動的容器里，而不是让整頁跟着滚。
- 代碼块和超長連結做溢出或換行處理，防止把布局顶出去。
第四层：彈窗、浮层與遮挡
首屏彈出全屏遮罩、自動播放的视频、常驻底部的悬浮條，這些在桌面端忍一忍還能接受，在手机上往往直接盖住主要内容。如果遮罩關不掉，或者關閉按钮小到点不中，訪客大概率直接返回。运营侧要盯的是：浮层是否可以關閉、是否遮挡正文、是否影响了首屏内容的呈現。
第五层：表單與輸入体驗
- 輸入框是否用了合适的 type，比如电话用 tel、信箱用 email，让手机調出對應键盘。
- 輸入框字号小于 16 像素时，部分系統在聚焦时會自動放大頁面，跳一下很影响填寫。
- 标簽與輸入框是否對齐，错誤提示是否紧挨着對應的輸入項。
怎么测：別只看自己手里那一台手机
- 用浏览器的设备模拟做初筛，再用真机复核，不同系統版本的表現會有差异。
- 横屏、小屏、大屏都過一遍，弱網环境下看看首屏能不能尽快出内容。
- 用带移動端 UA 的請求看一眼返回内容和狀態碼，確認没有因為 UA 不同而返回空頁或错誤頁。
- 如果站点有獨立的移動站，检查跳轉關系、canonical 指向和适配声明是否一致，別出現桌面和手机互相指認對方的混乱情况。
服務器與资源层面的几個细节
- 不要按 UA 返回不同狀態碼，訪客和蜘蛛看到的结果應当一致。
- 移動端首屏尽量少依赖大体积脚本，图片考虑 WebP 這類更省的格式。
- CDN 缓存策略要覆盖移動端资源，改版之後记得刷新。
一個可落地的巡检节奏
- 每月用真机抽查三到五個高频入口頁，记錄字号、点击、滚動情况。
- 每次改版或換模板後，重新過一遍上面五层检查。
- 把發現的問题记進一份清單，标注頁面和日期，改完再回看一次。
移動端适配没有一劳永逸的狀態，设备、系統、浏览器都在變。把它当成定期体检的項目，比上线前突击一次更靠谱。