同一個頁面在电脑上看着正常，到手机上就横向溢出、按钮点不到、表格撑破屏幕，這類問题在站点运营里很常见。移動端流量占比高的站点，如果适配没做好，不只影响訪客停留，也可能让搜尋引擎的移動端抓取拿不到完整内容。下面按自查顺序梳理移動端适配要看的几個点。
一、先用真机看，再用工具批量排查
浏览器開發者工具的设备模拟很方便，但它模拟不了真實触摸、真實網絡和真實字体渲染。自查时至少准备一台安卓和一台 iPhone，用移動網絡打開首頁、栏目頁、詳情頁各一两個，重点看首屏加载和排版。工具用来批量發現問题，真机用来確認结论。
二、视口與基础設定
- 頁面 head 里是否有 viewport 声明，常见寫法是 width=device-width, initial-scale=1。缺了這行，手机浏览器會按較宽的預設宽度渲染再把整頁缩小，字會變得很小。
- 是否誤设了禁止缩放的參數，這對视力不佳的訪客不友好，也容易在部分安卓机型上出現文字重排問题。
- 如果站点用的是獨立 m 子域，確認移動頁與 PC 頁之間有對應的跳轉或适配声明，且两邊内容基本一致，不要让移動版缺失正文。
- 建议優先用响應式一套代碼，多一套模板就多一份维護成本，内容更新时也容易只改一邊。
三、常见的错位来源
移動端排版出問题，多數不是 CSS 语法寫错，而是某個元素不肯缩。排查顺序可以從宽到窄：
- 固定宽度：老模板里寫死的容器宽度、图片宽度，會直接把頁面撑出横向滚動條。
- 表格：後台導出的資料表、價格對照表，建议外层包一個可横向滚動的容器，或者在小屏下改成卡片式排列。
- 長單词與長 URL：英文單词和连續數字不換行，會在窄屏顶出邊界，可以用 overflow-wrap 之類的属性處理。
- 绝對定位元素：返回顶部按钮、悬浮客服條，在小屏上可能压住正文或按钮，需要留出安全邊距。
- 图片與视频：给容器设最大宽度，媒体元素宽度 100%、高度自适應，避免一張大图把整個布局挤變形。
四、可点区域與輸入体驗
手机上手指比鼠标指针粗得多，連結和按钮太小就容易誤触。自查时可以留意這几点：
- 正文内鏈、導航菜單項的高度是否足够，間距會不會太密。
- 表單輸入框获得焦点後是否被软键盘遮挡，輸入類型是否用對了（手机号用 tel、信箱用 email），减少訪客来回切換键盘的次數。
- 彈窗能不能關掉，關閉按钮會不會被顶到屏幕外。
- 翻頁、篩選這類高频操作，是否放在拇指容易够到的位置。
五、移動端抓取與内容一致性
搜尋引擎現在較多以移動端 UA 抓取頁面，移動端呈現什么，基本就决定了它能理解到什么。自查时確認：正文在移動端完整展示，没有靠折叠隐藏掉大段内容；關键信息不依赖只有鼠标悬停才出現的交互；图片有合适的尺寸與替代文本；移動端的内部連結同样能顺着点下去。
六、一次可执行的自查清單
- 首頁、栏目頁、詳情頁各取一例，用真机走一遍主流程。
- 把手机横過来看一遍，检查横屏布局是否崩掉。
- 在手机上搜尋站内關鍵詞，確認搜尋框和结果頁可用。
- 用工具跑一次移動端体驗檢測，把提示的問题按影响面排序處理。
- 记錄本次發現的問题和修复時間，下次改版後對比复查。
移動端适配没有一步到位的方案，把真机检查放進栏目更新的例行流程，比事後集中返工省事得多。