本文约 3,418 字，预计阅读 9 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：Chrome 里拖窗口看一眼，是最不可靠的验收方式
站点在桌面浏览器里一切正常，用 Chrome 设备模拟器切到 iPhone 尺寸看一眼，似乎也没问题，于是就发布上线了。直到真实用户在微信里打开：正文 12px 字小得要眯眼、导航菜单点两下才展开、填手机号时键盘把输入框挡住、横屏看表格右侧一截永远滚不出来、一打开就弹出一个盖住整屏的订阅框，关掉它还找不到关闭按钮。
模拟器和真机的差距主要在三处：真实像素密度下的字体渲染、触摸热区的实际命中率、以及移动端浏览器地址栏收起/展开引起的视口高度变化。这三项在模拟器里基本看不出来。移动端适配的验收，必须落到一张可勾选的清单上，而不是”看着还行”。本文给出这张清单，每一项都附带判断标准和修法。
原理分析：移动端问题的四类根因
第一类是视口与缩放：没有正确的 <meta name="viewport">，移动浏览器会按 980px 虚拟视口渲染再整体缩小，字自然就小了。与之配套的还有 iOS 横屏时 -webkit-text-size-adjust 自动放大字号，会把你的排版撑变形。
第二类是尺寸单位：用 px 写的固定宽高在不同屏宽下要么太挤要么留白，而纯 vw 又会在平板上过大。合理做法是字号用 rem 配合根字号微调，或用 clamp() 做流式缩放，容器宽度用百分比/grid 而不是固定像素。
第三类是触摸交互：鼠标指针精度是 1px，手指是 40px 左右。桌面端能点的 16px 图标在手机上点十次中三次。同时移动端没有 hover，所有 :hover 才出现的菜单在手机上等于不存在。
第四类是输入法与视口高度：100vh 在移动端包含被地址栏遮挡的部分，用它做首屏高度会出现”下面一截被切掉”；软键盘弹出时视口变化，固定定位（position: fixed）的元素位置会错乱。
| 检查项 | 合格标准 | 常见不合格表现 |
|---|---|---|
| 正文字号 | ≥16px，行高 1.6–1.8 | 12–14px，挤成一团 |
| 点击热区 | ≥44×44 CSS px | 图标按钮 20px 点不中 |
| 首屏高度 | 用 100dvh 或 JS 变量 |
100vh 底部被切 |
| 横向滚动 | 全站无横向滚动条 | 表格/长 URL 撑出滚动 |
| 弹窗 | 关闭按钮 ≥44px、可点遮罩关闭 | 关不掉、一屏盖满 |
| 表单 | 输入时键盘不遮挡输入框 | 焦点被键盘挡住 |
保姆级实操
- 先确认视口与根字号
index.php/header.php 里必须有且只有一行 viewport，不要加 maximum-scale=1 或 user-scalable=no（会禁用双指缩放，属无障碍缺陷，也会被评测扣分）。
- 把字号、热区、首屏高度一次性修正
下面这段 CSS 可以直接放进主题的 style.css 末尾作为基线修正，clamp() 让标题在 320px 到 768px 之间平滑缩放，100dvh 解决移动端地址栏问题：
/* 基线：禁止 iOS 横屏自动放大字号 */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* 正文不小于 16px，行高 1.7；标题按屏宽流式缩放 */
body {
font-size: 16px;
line-height: 1.7;
}
.entry-content p { margin: 0 0 1.1em; }
h1 { font-size: clamp(22px, 6vw, 34px); }
h2 { font-size: clamp(19px, 5vw, 27px); }
/* 首屏高度用 dvh，避免地址栏收起时底部被切 */
.hero { min-height: 100dvh; }
@supports not (min-height: 100dvh) {
.hero { min-height: 100vh; }
}
/* 触摸热区：所有图标类按钮至少 44px */
.menu-toggle,
.search-toggle,
.btn--icon {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 没有 hover 的设备上，不要把内容藏在 :hover 里 */
@media (hover: none) {
.dropdown:hover .dropdown__menu { display: block; }
}
/* 长内容不撑破容器：表格横向滚动、长串换行 */
.entry-content table { display: block; overflow-x: auto; max-width: 100%; }
.entry-content { overflow-wrap: break-word; word-break: break-word; }
/* 图片永远不超出容器 */
img { max-width: 100%; height: auto; }
- 按断点验收三种宽度
用真机或至少用浏览器的响应式模式，在 320px（iPhone SE）、390px（主流安卓/iPhone）、768px（平板竖屏）三个宽度下各走一遍关键路径：打开首页 → 进栏目页 → 进文章页 → 提交表单。记录每一处挤在一起或需要横向滚动的地方。
- 横屏逐项测
横屏最容易出问题的是：固定顶栏（应改为 position: sticky 或横屏时隐藏）、全屏弹窗（横屏高度只有 400px 左右，弹窗内容必须能内部滚动）、表格（必须横向滚动而不是溢出隐藏）。
- 表单专项
所有输入框 font-size ≥16px（小于 16px 时 iOS Safari 会在聚焦时自动放大页面，这是最常见的”点了输入框页面就跳”的原因）；type="tel" 用 inputmode="numeric" 让手机弹数字键盘；提交按钮固定在内容下方而不是页面底部固定（position: fixed 会被键盘顶飞）。
- 弹窗按边界处理
移动端弹窗面积不超过视口 70%，关闭按钮做在右上角且 ≥44px，支持点遮罩关闭，同一会话最多弹一次（用 localStorage 记录）。具体的设计边界可参考 网站弹窗与浮窗的设计边界。
常见踩坑
- 只在 iPhone 上测：安卓机型（尤其国产 ROM 的浏览器）对
dvh、backdrop-filter支持不一，至少测一台安卓。 - 案例：某站点用
position: fixed做了一个”咨询”悬浮按钮，桌面端没问题，移动端用户填表单时这个按钮正好悬在键盘上方，误触率极高，后台收到大量只填了手机号的空表单。改成表单页隐藏悬浮按钮、表单下方放一个静态按钮后，有效线索量提升明显。 <meta name="viewport">被主题写了两份：第二份里的width=device-width被覆盖成固定值，整站缩放异常。- 用
px写死容器宽度：小屏上横向滚动条出现，用户横向滑动时常常误触返回手势。 - 忘记
img { max-width: 100% }：编辑器里设置过固定宽度的图片在手机上撑破容器。 :hover才显示的下拉菜单在手机上打不开：必须在@media (hover: none)或点击（tap）事件里处理。- 验收只看首页：文章页的表格、代码块、长 URL 才是最容易撑破布局的地方。
总结
移动端验收的判断标准是”能不能单手完成一次完整的关键路径”。你就想象自己坐在地铁上、单手、网络一般，打开站点到提交表单，中间任何一处需要双指缩放、需要点两次、需要横向滑动，都是不合格。建议把上面那张清单存成表格，每次上线前走一遍，五分钟就能过完。移动端体验过关后，配合 网站数据分析基础指标 分设备看一次跳出率——如果移动端跳出率显著高于 PC，说明还有没查出来的适配问题。图片在小屏上的裁切效果则对照 网站图片素材的规范与压缩流程 一起检查。
