不少站点的移動端流量已经超過桌面，但日常更新时，多數人還是坐在电脑前看頁面。問题往往是這样积累起来的：某次改版把一段内容塞進卡片，桌面看着没問题，手机上却被挤到屏幕外；某個浮层在手机上正好盖住了正文的入口。移動端自查的意义，就是在訪客抱怨之前，先把這些细节過一遍。
先確認视口和基础布局
第一步永遠是 viewport。没有它，浏览器會按桌面宽度渲染再整体缩放，字會變得很小。
- 检查頁面头部是否有 viewport 設定，宽度為 device-width，初始缩放為 1。
- 確認没有用禁止缩放的寫法鎖死頁面，這會挡住需要放大阅讀的用戶。
- 在窄屏下看有没有整体横向滚動條，通常意味着某個元素固定了超出屏幕的宽度。
文字、按钮與点击区域
手机上没有鼠标，手指的落点是模糊的。字号過小、行距過密、按钮挨得太近，都會让操作變得困难。
- 正文字号建议保持在 16px 左右，行高留出余量。
- 按钮和連結的点击区域不要小于约 44×44 像素，相邻元素之間留出間距。
- 检查浅色文字压在浅色背景上的情况，戶外光线强时尤其明顯。
图片與横向溢出
- 给内容区图片設定最大宽度 100%，避免撑破容器。
- 宽表格、長代碼块在小屏上容易溢出，可以用横向滚動容器包住，而不是一味缩小字号。
- 嵌入的视频播放器和框架同样要检查宽度和比例。
彈窗、浮层與固定元素
客服浮窗、订阅提示、底部工具栏在手机上占據的比例遠大于桌面。它們出現的位置如果压住了正文或關閉按钮，用戶很难繼續往下看。
- 確認關閉按钮可见且可点，不要藏在屏幕邊缘。
- 浮层不要遮挡主要内容，尤其是首屏的關键信息。
- 检查浮层是否跟随滚動，是否在返回时反复彈出。
内容一致性：不要只對桌面说话
有人為了让手机頁面看起来简洁，在样式里直接隐藏部分内容。這類做法需要格外小心。
- 被隐藏属性去掉的内容，通常不會被当作頁面正文的一部分。
- 如果桌面和移動端展示的内容差异很大，要確認重要的說明、價格、联系方式在两端都能看到。
- 尽量让两端共用同一套地址，用响應式布局适配，而不是單獨维護一個移動站。
地址與跳轉
- 如果确實用獨立的移動站，確認手机訪問时有跳轉，桌面訪問也能回到主站，不要形成来回跳。
- 移動站地址不要带随机會话參數，否則同一頁面會出現很多條记錄。
- 跳轉過程中尽量保持原有路径，方便對照排查。
怎么测比較靠谱
- 用浏览器開發者工具的设备模拟，快速過一遍常见尺寸。
- 再用真机走一遍關键路径：首頁、栏目頁、内容頁、提交入口。
- 換一台小屏手机和一台大屏手机，問题常常只在其中一邊出現。
- 拉慢網絡看首屏，確認主要内容在没有等到全部资源时也能先讀。
不必追求在每個尺寸上都完美，先把两件事確認下来：能不能正常讀完一篇文章，能不能顺利点到自己想要的入口。
多久做一次
不必等到大改版才检查。模板或样式調整之後、新增一個栏目或浮层之後，花十几分钟過一遍清單就够了。把這几項固定成發布前的习惯，比事後一個個补要省事得多。