近几年大部分站点的访问量里，手机端占比常常超过一半。搜索引擎的抓取也越来越多地使用移动端 UA，看到的正是手机上那一版页面。如果只在桌面浏览器里调试过，很容易漏掉一类问题：访客打开页面看到的是错位的排版、点不中的按钮、需要左右拖动的表格。

移动端自查不需要高深工具，一台手机加一个浏览器就够。下面按“能不能看清、能不能点中、会不会跑偏”三条线索来梳理。

一、先确认页面没有被整体缩小

最常见的问题是没有设置视口，或者设置了却把宽度写死。手机浏览器会按桌面宽度渲染，然后整体缩小，字变得极小，用户必须双指放大才能读。

• 检查 head 里是否有 viewport 声明，内容通常是 width=device-width, initial-scale=1。
• 尽量不要用 user-scalable=no 禁止缩放，这对视力不好的访客不友好，部分平台也会忽略。
• 检查是否存在固定的最小宽度，比如 min-width: 1200px，它会让页面在小屏上必然出现横向滚动。

二、触控目标要能点得中

手指的点击精度远低于鼠标。一个只有十几像素高的文字链接，在手机上很容易点偏，结果点到了旁边的另一个链接。

• 按钮和链接的可点击区域建议不小于 44×44 像素；视觉尺寸较小的时候，用内边距把热区撑开。
• 相邻的可点击元素之间留出间距，尤其是列表里并排的“编辑 / 删除”这类按钮。
• 检查导航的汉堡菜单、返回顶部按钮是否被其他元素盖住，点击没反应往往是层级问题。

三、排版与内容的横向溢出

横向滚动条是移动端最影响体验的问题之一，来源通常很具体。

1. 宽度写死的图片：给图片加 max-width: 100%，高度自动，避免被裁切或撑宽。
2. 宽表格：不要硬撑，改成一列一行的卡片式展示，或者只让表格区域自身横向滚动。
3. 代码块与长链接：加 overflow-x: auto 和换行规则，否则会把整个页面撑宽。
4. 绝对定位的装饰元素或广告位：它们溢出的部分同样会产生滚动条。

排查时可以临时给页面加一条通用样式，给所有元素描个边框，把溢出的那个组件找出来再删除临时规则。

四、字号、行高与对比度

正文建议不小于 16px，行高在 1.5 到 1.8 之间。小于 14px 的中文正文在手机上阅读会很吃力。同时留意浅灰文字配白底的情况，在户外光线下几乎看不清，按钮上的文字尤其要注意。

五、表单与输入体验

• 手机号、邮箱、数字输入框使用对应的 input type，能唤起更合适的键盘。
• 关闭输入框的自动大写和自动纠正，减少输错。
• 校验提示要出现在字段附近，而不是只在页面顶部闪一下就消失。
• 检查提交按钮在软键盘弹出后是否还被挡住，能不能顺利点到。

六、弹窗、浮层与首屏内容

移动端屏幕小，一个占屏大半的弹窗几乎等于把内容全部挡掉。自查时留意：

• 打开页面是否立刻弹出订阅、下载应用之类的遮罩，关闭按钮是否明显、是否点得到。
• 固定顶栏和固定底栏加起来占了多少高度，正文还剩多少可用空间。
• 首屏是否被一张巨大的轮播图占满，正文要滚动很久才出现。

把手机横过来再试一次。横屏下被裁掉的内容和错位的元素同样需要处理，视频页和数据图表页尤其容易出问题。

七、移动端与桌面的内容一致性

有些站点为了移动端“简洁”，直接用 display:none 隐藏了大段正文。搜索引擎和访客看到的应该是同一份内容，重要的说明、价格、联系方式不要只在桌面端出现，也不要用移动端完全替代的简化页面去承接移动流量。

八、一套可执行的测试流程

1. 用真实手机打开几个典型页面：首页、列表页、详情页、表单页。
2. 在开发者工具里切换到设备模拟，试 320px、375px、414px 几个常见宽度。
3. 开启网络限速，看看图片和字体加载慢的时候，布局会不会明显跳动。
4. 在系统设置里把字体调到最大，检查页面是否还能正常显示、按钮是否还完整。
5. 把发现的问题记成清单，改完一条勾一条，下次改版再跑一遍。

移动端问题往往不是一次性能改完的，但“点不中、看不清、会跑偏”这三类优先解决之后，访客在手机上的浏览和后续操作都会顺畅很多，也少了一批明明内容不错却因为排版而流失的访问。