近几年大部分站点的訪問量里，手机端占比常常超過一半。搜尋引擎的抓取也越来越多地使用移動端 UA，看到的正是手机上那一版頁面。如果只在桌面浏览器里調试過，很容易漏掉一類問题：訪客打開頁面看到的是错位的排版、点不中的按钮、需要左右拖動的表格。
移動端自查不需要高深工具，一台手机加一個浏览器就够。下面按“能不能看清、能不能点中、會不會跑偏”三條线索来梳理。
一、先確認頁面没有被整体缩小
最常见的問题是没有設定视口，或者設定了却把宽度寫死。手机浏览器會按桌面宽度渲染，然後整体缩小，字變得极小，用戶必须双指放大才能讀。
- 检查 head 里是否有 viewport 声明，内容通常是 width=device-width, initial-scale=1。
- 尽量不要用 user-scalable=no 禁止缩放，這對视力不好的訪客不友好，部分平台也會忽略。
- 检查是否存在固定的最小宽度，比如 min-width: 1200px，它會让頁面在小屏上必然出現横向滚動。
二、触控目标要能点得中
手指的点击精度遠低于鼠标。一個只有十几像素高的文字連結，在手机上很容易点偏，结果点到了旁邊的另一個連結。
- 按钮和連結的可点击区域建议不小于 44×44 像素；视觉尺寸較小的时候，用内邊距把热区撑開。
- 相邻的可点击元素之間留出間距，尤其是列表里並排的“編輯 / 刪除”這類按钮。
- 检查導航的汉堡菜單、返回顶部按钮是否被其他元素盖住，点击没反應往往是层級問题。
三、排版與内容的横向溢出
横向滚動條是移動端最影响体驗的問题之一，来源通常很具体。
- 宽度寫死的图片：给图片加 max-width: 100%，高度自動，避免被裁切或撑宽。
- 宽表格：不要硬撑，改成一列一行的卡片式展示，或者只让表格区域自身横向滚動。
- 代碼块與長連結：加 overflow-x: auto 和換行規則，否則會把整個頁面撑宽。
- 绝對定位的装饰元素或广告位：它們溢出的部分同样會产生滚動條。
排查时可以临时给頁面加一條通用样式，给所有元素描個邊框，把溢出的那個组件找出来再刪除临时規則。
四、字号、行高與對比度
正文建议不小于 16px，行高在 1.5 到 1.8 之間。小于 14px 的中文正文在手机上阅讀會很吃力。同时留意浅灰文字配白底的情况，在戶外光线下几乎看不清，按钮上的文字尤其要注意。
五、表單與輸入体驗
- 手机号、信箱、數字輸入框使用對應的 input type，能唤起更合适的键盘。
- 關閉輸入框的自動大寫和自動纠正，减少輸错。
- 校驗提示要出現在字段附近，而不是只在頁面顶部闪一下就消失。
- 检查提交按钮在软键盘彈出後是否還被挡住，能不能顺利点到。
六、彈窗、浮层與首屏内容
移動端屏幕小，一個占屏大半的彈窗几乎等于把内容全部挡掉。自查时留意：
- 打開頁面是否立刻彈出订阅、下载應用之類的遮罩，關閉按钮是否明顯、是否点得到。
- 固定顶栏和固定底栏加起来占了多少高度，正文還剩多少可用空間。
- 首屏是否被一張巨大的轮播图占满，正文要滚動很久才出現。
把手机横過来再试一次。横屏下被裁掉的内容和错位的元素同样需要處理，视频頁和資料图表頁尤其容易出問题。
七、移動端與桌面的内容一致性
有些站点為了移動端“简洁”，直接用 display:none 隐藏了大段正文。搜尋引擎和訪客看到的應该是同一份内容，重要的說明、價格、联系方式不要只在桌面端出現，也不要用移動端完全替代的简化頁面去承接移動流量。
八、一套可执行的測試流程
- 用真實手机打開几個典型頁面：首頁、列表頁、詳情頁、表單頁。
- 在開發者工具里切換到设备模拟，试 320px、375px、414px 几個常见宽度。
- 開啟網絡限速，看看图片和字体加载慢的时候，布局會不會明顯跳動。
- 在系統設定里把字体調到最大，检查頁面是否還能正常顯示、按钮是否還完整。
- 把發現的問题记成清單，改完一條勾一條，下次改版再跑一遍。
移動端問题往往不是一次性能改完的，但“点不中、看不清、會跑偏”這三類優先解决之後，訪客在手机上的浏览和後續操作都會顺畅很多，也少了一批明明内容不错却因為排版而流失的訪問。