很多人以为手机上能打开就算适配好了，其实用户看到的可能是字小得要用两指放大、按钮挤在一起点不准、页面还能左右拖动。移动端适配要解决的就是这些具体问题，而不是能不能打开。下面按排查顺序讲清楚。
一、先看有没有视口设置
视口（viewport）是浏览器用来渲染页面的那块虚拟画布。手机浏览器默认会按一个比较宽的宽度排版，再整体缩小塞进屏幕，所以你看到的是缩小的电脑版。解决办法是在页面头部加一行视口声明，告诉浏览器按设备实际宽度来排版。
自查方法：在电脑浏览器打开页面，按 F12 调出开发者工具，查看页面源码头部有没有 width=device-width 这类声明。没有的话，后面所有适配手段基本都白搭。
二、判断页面用的是哪种适配方式
常见三种，判断标准很简单：
- 固定宽度：页面宽度写死，比如 1200 像素。手机上会出现横向滚动条，需要左右拖动，这类页面最需要改。
- 响应式布局：同一套代码，靠媒体查询（按屏幕宽度切换样式的规则）在不同宽度下显示不同排版。拖动浏览器宽度时布局会跟着变，就是这一类。
- 独立手机站：手机访问时跳到另一个网址或子域名。判断方法是看手机和电脑打开的网址是否不同。
三种没有绝对优劣，关键看是否真的在小屏上做过调整。
三、四类最常见的问题
- 横向滚动条：多半是某个元素宽度超出屏幕，比如固定宽度的图片、表格、地图嵌入框，或者内边距把容器撑破。
- 字体太小：正文小于 14 像素，手机上看着吃力，一般正文 16 像素左右比较稳妥。
- 可点区域太小：链接和按钮挤在一起，手指点不准，文字链接和按钮之间要留出足够间距。
- 图片撑破容器：图片没有限制最大宽度，一张大图直接把页面撑开。
四、动手自查：按这个顺序走一遍
- 在电脑浏览器打开页面，按 F12 切到设备模拟模式，选一台主流手机尺寸，看有没有横向滚动。
- 依次切换几档常见宽度，比如窄屏、主流手机、平板，看布局在哪一档开始乱。
- 用真机打开同一个页面，重点试三件事：能不能单指操作、字号是否舒服、按钮是否点得准。
- 检查页面底部的表单和弹窗，这两处最容易在小屏上被遮挡或超出屏幕。
- 记录问题清单，标注出问题出现的屏幕宽度，方便交给开发或自行修改时定位。
五、改完之后怎么验证
改完不要只在浏览器模拟器里看。模拟器只是近似，真机的字体渲染、系统缩放、输入法弹出行为都可能不一样。建议至少用一两台真实手机再走一遍上面的自查清单，重点确认表单能不能正常填写、页面能不能顺利滚动到底部。
另外提醒一点：适配不是一次性工作。以后每次新增模块、插入大图或第三方嵌入代码，比如在线客服、地图，都可能重新引入横向滚动。把上面这套自查养成习惯，比出了问题再回头找要省事得多。