同一个页面在电脑上看着正常，到手机上就横向溢出、按钮点不到、表格撑破屏幕，这类问题在站点运营里很常见。移动端流量占比高的站点，如果适配没做好，不只影响访客停留，也可能让搜索引擎的移动端抓取拿不到完整内容。下面按自查顺序梳理移动端适配要看的几个点。
一、先用真机看，再用工具批量排查
浏览器开发者工具的设备模拟很方便，但它模拟不了真实触摸、真实网络和真实字体渲染。自查时至少准备一台安卓和一台 iPhone，用移动网络打开首页、栏目页、详情页各一两个，重点看首屏加载和排版。工具用来批量发现问题，真机用来确认结论。
二、视口与基础设置
- 页面 head 里是否有 viewport 声明，常见写法是 width=device-width, initial-scale=1。缺了这行，手机浏览器会按较宽的默认宽度渲染再把整页缩小，字会变得很小。
- 是否误设了禁止缩放的参数，这对视力不佳的访客不友好，也容易在部分安卓机型上出现文字重排问题。
- 如果站点用的是独立 m 子域，确认移动页与 PC 页之间有对应的跳转或适配声明，且两边内容基本一致，不要让移动版缺失正文。
- 建议优先用响应式一套代码，多一套模板就多一份维护成本，内容更新时也容易只改一边。
三、常见的错位来源
移动端排版出问题，多数不是 CSS 语法写错，而是某个元素不肯缩。排查顺序可以从宽到窄：
- 固定宽度：老模板里写死的容器宽度、图片宽度，会直接把页面撑出横向滚动条。
- 表格：后台导出的数据表、价格对照表，建议外层包一个可横向滚动的容器，或者在小屏下改成卡片式排列。
- 长单词与长 URL：英文单词和连续数字不换行，会在窄屏顶出边界，可以用 overflow-wrap 之类的属性处理。
- 绝对定位元素：返回顶部按钮、悬浮客服条，在小屏上可能压住正文或按钮，需要留出安全边距。
- 图片与视频：给容器设最大宽度，媒体元素宽度 100%、高度自适应，避免一张大图把整个布局挤变形。
四、可点区域与输入体验
手机上手指比鼠标指针粗得多，链接和按钮太小就容易误触。自查时可以留意这几点：
- 正文内链、导航菜单项的高度是否足够，间距会不会太密。
- 表单输入框获得焦点后是否被软键盘遮挡，输入类型是否用对了（手机号用 tel、邮箱用 email），减少访客来回切换键盘的次数。
- 弹窗能不能关掉，关闭按钮会不会被顶到屏幕外。
- 翻页、筛选这类高频操作，是否放在拇指容易够到的位置。
五、移动端抓取与内容一致性
搜索引擎现在较多以移动端 UA 抓取页面，移动端呈现什么，基本就决定了它能理解到什么。自查时确认：正文在移动端完整展示，没有靠折叠隐藏掉大段内容；关键信息不依赖只有鼠标悬停才出现的交互；图片有合适的尺寸与替代文本；移动端的内部链接同样能顺着点下去。
六、一次可执行的自查清单
- 首页、栏目页、详情页各取一例，用真机走一遍主流程。
- 把手机横过来看一遍，检查横屏布局是否崩掉。
- 在手机上搜索站内关键词，确认搜索框和结果页可用。
- 用工具跑一次移动端体验检测，把提示的问题按影响面排序处理。
- 记录本次发现的问题和修复时间，下次改版后对比复查。
移动端适配没有一步到位的方案，把真机检查放进栏目更新的例行流程，比事后集中返工省事得多。