一半流量来自手机：vibe 项目的移动端体验清单

你的网站在手机上是什么样子？先诚实回答

做个实验：现在掏出手机，打开你最近 vibe 出来的那个项目。别用 Wi-Fi，用流量。注意三个瞬间：第一屏加载用了几秒？最大的那个按钮，你的拇指一次能点中吗？填表单的时候，键盘弹出来有没有把提交按钮顶到看不见的地方？

如果这三个问题有一个让你皱眉——欢迎来到大多数 vibe 项目的真实处境。Agent 默认在桌面视口里工作：它在 1440px 宽的画布上排版、调试、截图给你看，一切完美。但你的用户里，可能一半以上是用手机点开链接的——朋友圈、推文、群聊里转发的链接，落地页就是手机浏览器。桌面端完美、移动端翻车，是 vibe 项目最常见的「隐形差评」来源：用户不会告诉你，只会关掉。

移动端不是「把桌面版缩小」，而是另一套交互语言：触控代替鼠标、流量代替宽带、随时被打断代替专注浏览。本文是一份专为 vibe coder 写的移动端体验清单，按「触控 → 视口 → 表单 → 性能 → PWA → 验收流程」的顺序，帮你把 Agent 的桌面偏见一个一个纠过来。

触控：手指不是鼠标

鼠标的点击精度是 1 像素，手指的触控面积是 44×44 像素起——这是 Apple 和 Google 同时认可的最小触控目标尺寸。Agent 生成的界面经常犯三个错：

错一：按钮太小太密。导航栏塞 6 个 28px 高的文字链，桌面端 hover 精准，手机上手指一次点中两个。修法：可点击元素最小 44×44px，相邻可点击元素间距至少 8px。图标按钮看着小没关系——用 padding 把触控热区撑大，视觉 24px、热区 48px 是常用手法。

错二：hover 依赖。「鼠标悬停显示删除按钮」「hover 才出现 tooltip」——手机上没有 hover，长按、滑动才是手势语言。所有 hover 触发的关键操作，移动端必须有替代入口：删除按钮常驻显示、tooltip 换成点击展开。让 Agent 检查一遍：关掉鼠标，这个页面还能完成核心流程吗？

错三：手势冲突。页面里做了横向滑动的卡片，又在全局绑了右滑返回——用户想滑卡片，结果退出了页面。移动端手势是稀缺资源：一个页面只保留一种主手势，别让轮播、抽屉、返回手势打架。Agent 引入第三方手势库时，问它一句：「这个库和浏览器的默认手势冲不冲突？」

还有一个拇指法则：核心操作放在屏幕下半区。手机是单手握持的，拇指的舒适区是屏幕底部三分之二。把「发布」「提交」「播放」这种最高频按钮放在顶部导航栏，是桌面思维；底部固定操作栏（bottom bar）才是移动思维。

视口与缩放：三行 meta 决定生死

移动端 bug 里，至少三分之一是视口（viewport）没设对。先确保你的 HTML head 里有这一行：

<meta name="viewport" content="width=device-width, initial-scale=1">——没有它，手机浏览器会假装自己是 980px 宽的桌面浏览器，把你的页面缩成一团，用户只能双指放大看。这是 2026 年还偶尔能在 vibe 项目里看到的 bug，别笑，Agent 生成的某些落地页模板真会漏掉它。

注意后半句：不要加 maximum-scale=1, user-scalable=no。有些模板为了「防止双击缩放」会禁用用户缩放——这直接违反无障碍规范，视力不好的用户无法放大看字，iOS 甚至会在无障碍审核里扣分。双击缩放的问题用 touch-action: manipulation 解决，既去掉 300ms 点击延迟，又保留用户缩放权。

然后是横向溢出：某个元素宽度超了 100vw，页面可以左右晃——这是移动端最丑的 bug 之一。排查方法：手机上左右滑一下，能晃就是有元素溢出；桌面端在 DevTools 里用 document.querySelectorAll('*') 扫一遍 scrollWidth > innerWidth 的元素。常见元凶：固定宽度的表格、white-space: nowrap 的长文本、负 margin 的装饰元素。修法：表格包一层横向滚动容器（overflow-x: auto），长文本允许换行或截断。

100vh 的坑也值得单独说：手机浏览器的地址栏会伸缩，height: 100vh 在 iOS Safari 上经常导致底部被遮挡或出现诡异空白。用 100dvh（dynamic viewport height）代替，浏览器会自动跟随地址栏伸缩调整。这是 Agent 很少主动用的新单位，你提一次它就记住了。

表单：移动端转化的生死线

如果你的 vibe 项目有任何表单（注册、登录、下单、搜索），这一节直接决定转化率。手机键盘又小又笨拙，表单是用户挫败感最强的地方。

一，调起正确的键盘。手机号输入框用 inputmode="numeric" 调数字键盘，邮箱用 type="email" 调带 @ 的键盘，搜索用 type="search"。Agent 默认全用 type="text"，用户输手机号要在字母键盘和数字键盘之间切三次——每一次切换都是一次流失机会。这是最便宜的优化，一行属性的事。

二，键盘顶起布局。键盘弹起占掉半屏，你的提交按钮如果在键盘下面，用户填完表找不到提交键——以为卡死了。修法：表单页用弹性布局，提交按钮放在可视区内或做成键盘上方的固定条；iOS 上还要处理 visualViewport 的变化。测试方法：真机上点一遍每个输入框，看提交按钮是否始终可达。

三，自动填充和自动大写。给输入框加 autocomplete="email" / tel / name，浏览器会自动填入用户保存的信息；iOS 上给非英文输入加 autocapitalize="off" autocorrect="off"，否则邮箱第一个字母被自动大写导致登录失败——这个 bug 隐蔽到离谱，但真实发生过无数次。

四，一屏一件事。桌面端可以左右分栏放 8 个字段，移动端请纵向排、分组分步。长表单拆成多步（每步 3~5 个字段）+ 进度指示，转化率通常翻倍。Agent 生成的「一屏大表单」在手机上就是劝退书。

性能预算：按 4G 和中端机算账

性能指南里讲过通用优化，移动端要单独算一笔账：目标用户可能是 4G 网络 + 三年前的安卓中端机。量化预算：首屏 JS gzip 后 170KB 以内（比桌面版再砍一刀），LCP < 2.5 秒按 Moto G 级别设备 + 4G 慢速网络测（Lighthouse 的 mobile 预设就是这个意思），图片按 800px 宽生成移动版（别把 1920px 的 hero 图发给手机）。

三个移动端特有优化：一，响应式图片。srcset / sizes 让浏览器按屏幕宽度选图，手机拿 800px 版、桌面拿 1600px 版。next/image 自动做这件事，手写 <img> 就别偷懒。二，砍掉桌面端特效。大背景视频、复杂 canvas 动画、视差滚动——在手机上是耗电发热卡顿三件套。用 prefers-reduced-motion 媒体查询给动效做降级，既省电又照顾前庭敏感用户。三，字体再瘦身。中文字体几 MB，移动端按「标题用 webfont（子集化）、正文系统字体」的策略，参考性能指南里的字体章节。

测试别只用 Chrome DevTools 的设备模拟——模拟器没有真实的 CPU 降频和网络抖动。找一台旧安卓真机（闲鱼两百块的那种），它是你最诚实的性能顾问。

PWA：让网站获得「安装」能力

很多 vibe 项目其实不需要上架 App Store——PWA（渐进式 Web 应用）能给网站「安装到主屏幕、全屏运行、离线可用」的能力，成本只是一个 manifest 文件 + 一个 service worker。

manifest.json 声明应用名、图标（512×512 和 192×192 两套）、主题色、显示模式（display: standalone 去掉浏览器 chrome）。service worker 做缓存策略：App Shell（HTML/CSS/JS 框架）预缓存、内容走网络优先+缓存兜底。Next.js 有 next-pwa，Vite 有 vite-plugin-pwa，都是加个插件的事。

判断要不要做 PWA：用户会重复访问吗（工具类、日记类、dashboard 类——是；一次性营销落地页——否）？需要弱网可用吗（地铁里看、户外用——是）？两个都是否，就别折腾；有一个是，PWA 的投入产出比就很高。注意 iOS 对 PWA 的支持这几年已经大幅改善（推送通知 16.4+ 可用），别再拿「iOS 不行」当借口——先查最新支持情况再下结论。

验收流程：让 Agent 按移动优先出活

最后是工作流。指望每次人肉掏手机测一遍不现实，把移动端验收做进 Agent 的工作流里：

一，需求阶段就声明。任务开头加一句：「移动优先：先按 390px 宽设计，再向上适配桌面；所有交互必须无 hover 可用。」Agent 的布局思路会完全不一样——先移动后桌面，比先桌面后修移动省一半返工。

二，截图验收。让 Agent 每次改完 UI，用 Playwright 的移动设备模拟（devices['iPhone 14'] / 'Pixel 7'）截三张图：390px 首页、表单页、横屏。Playwright 一行配置的事，但能让 80% 的移动端 bug 在提交前现形。截图发给你目检——人眼看一眼，比跑一百个断言管用。

三，真机抽检清单。每个版本发布前，在真机上走一遍：□ 首屏 4G 下 3 秒内可见 □ 所有按钮拇指可点 □ 表单全流程走完 □ 横滑页面不晃 □ 键盘弹起不遮挡提交 □ 弱网（地铁/电梯）下核心功能可用。六项，十分钟。

说到底，移动端体验是一面照妖镜：它照出的不是技术问题，是「你有没有替用户着想」。Agent 替你写了代码，但替用户着想这件事，它只能执行你的标准。把这份清单贴进项目的 AGENTS.md，下次 Agent 交活时，它会自己先掏出手机看一眼——虽然它没有手机，但它有 Playwright，而你有真机。