移动端适配检查：你的站一半流量在手机上
作者：夸父
内容站的移动流量占比过半，但多数桌面开发的站点在手机上"能用但难用"。本文给移动端适配的检查清单：导航、触达、字号、性能四组。
导航与触达（3 项）
1. 汉堡菜单完整可用：移动端导航是折叠菜单——逐项点一遍确认全部栏目可达（这条曾经翻过车，见站内复盘）。2. 触控目标 ≥44px：按钮、链接的可点区域小于 44px 在手机上容易点错——列表项、卡片整体可点而不是只有文字可点。3. 浮动按钮不遮挡内容：右下角的客服/工具浮钮在移动端要避开正文与关键按钮。
字号与可读性（3 项）
4. 正文字号 ≥14px（手机上 14px 是可读下限，16px 舒适）；5. 行长控制：手机上一行 20~28 字（响应式布局自动处理，检查强制宽度例外）；6. 表格可横向滚动：内容页的对比表格在窄屏上要能横滑，不能挤成一团。
性能（3 项）
7. 首屏加载 <3s：静态导出的优势就在这——用 Lighthouse 跑一次移动端评分，90+ 为合格；8. 图片懒加载与压缩：长页面的图片懒加载，WebP 格式；9. JS 体积：移动网络下 JS 是最大开销——构建产物的体积监控纳入例行。
兼容性（2 项）
10. 微信内置浏览器：国内最大的"内置浏览器"场景——分享卡片、登录流程在内置浏览器里走一遍；11. iOS Safari 的兼容：Safari 对某些 CSS 特性（position: sticky、100vh）的处理与 Chrome 不同——真机测试。
检查的节奏
新栏目上线时全查一遍（11 项），日常每季度抽查。移动端的数据证据：统计后台看移动/桌面分渠道的行为差异——移动端跳出率显著高，就是适配问题的信号。
常见问题
站点是响应式布局就等于适配了吗？
不等于。响应式解决"布局不乱"，移动端体验还有四件更细的事：触控目标的大小、字号的可读性、首屏加载速度、以及平台内置浏览器的兼容性。逐项检查才叫适配。
怎么快速测试移动端？
浏览器开发者工具的手机模拟（Chrome DevTools 的 device mode）做第一轮；第二轮用真实手机访问（不同系统各一台）；第三轮看统计数据里的移动端行为差异。