内容摘要：移动端web开发，说白了就是跟手机浏览器打交道。可这交道打得一点也不轻松。 我见过太多团队，PC端页面做得风生水起，一到手机端就翻车。有个同事，花了三天时间调一个弹窗，电脑上完美得能上杂志封面，结果i

移动端web开发，移动说白了就是移动跟手机浏览器打交道。可这交道打得一点也不轻松。移动

我见过太多团队，移动PC端页面做得风生水起，移动一到手机端就翻车。移动有个同事，移动花了三天时间调一个弹窗，移动电脑上完美得能上杂志封面，移动结果iPhone上一点，移动弹窗直接跑到屏幕外头去了。移动他盯着真机愣了半天，移动最后发现是移动`position: fixed`在iOS的键盘弹起时整个失效。这种坑，移动文档里写得清清楚楚，移动但你不踩一脚，永远记不住。

核心问题在于，移动端不是“缩小版的PC”，而是“放大版的手持设备”。你的用户可能站在地铁上，单手拇指滑动屏幕，网络信号忽强忽弱。这时候你跟他谈什么优雅的动画过渡？他要的是页面别白屏，按钮别点错。

所以第一件事，别急着写代码，先搞清楚你的用户拿什么设备看你。安卓千奇百怪，从几百块的老人机到折叠屏，屏幕尺寸、系统版本、浏览器内核全都不一样。iOS倒是统一，可Safari的私密模式会缓存你的JS，搞得你明明改了代码，用户看到的还是旧版本。这问题我排查过整整一个下午，最后发现是浏览器缓存策略在作祟，气得我差点把咖啡泼在键盘上。

布局上，别迷信什么框架。Flexbox和Grid在PC上跑得好好的，到了安卓4.4的微信内置浏览器里，直接不认`gap`属性。你写的时候爽了，测试的时候哭都来不及。我的习惯是，能用`margin`解决的绝不用`gap`，能写两行CSS搞定的绝不套一层组件。移动端性能本来就紧张，你多引入一个库，首屏加载就慢一秒，用户就多一分流失的可能。

触控事件这块，更是个玄学。`click`有300毫秒延迟，那是老黄历了，现在浏览器都改了。但你以为就没事了？试试`touchmove`和`scroll`同时触发的时候，页面那个抖啊，像得了帕金森。我后来学乖了，凡是需要跟手滚动的元素，直接上`transform: translate3d()`，开启GPU加速，至少能骗过一部分低端机。

还有图片。PC上你放一张2MB的图，用户可能无所谓。手机上呢？别人的流量包可经不起你这么造。用`srcset`按屏幕宽度给不同尺寸的图，这是基本功。可总有开发图省事，一张大图走天下。我上次测一个电商页面，首屏光是图片就加载了4.6MB，加载完黄花菜都凉了。后来我把所有图切成WebP，压缩到原来的三分之一，加载时间从8秒降到2秒，转化率立刻涨了12%。数据不会骗人。

说到性能，就得提渲染路径。移动端的CPU和GPU，跟桌面级没法比。你写个复杂的CSS阴影，PC上毫无感觉，手机上直接掉帧掉到15fps。我的原则是：能用简单的纯色背景，就别加渐变；能用PNG，就别用带透明通道的大图。有些视觉上的精致，在移动端就是灾难。

调试也别光靠Chrome的模拟器。模拟器只能告诉你大概布局，真实设备上的字体渲染、滚动惯性、触控灵敏度，模拟器一概不管。我每次改完都要拿两台真机测——一台最新的iPhone，一台两年前的安卓中端机。别嫌麻烦，要知道你的用户里，用旧手机的人比用新手机的多得多。

最后说一句，别把PC端的代码直接搬到手机上。那就像穿西装去跑马拉松，看着体面，跑起来要命。移动端的本质是“克制”——代码少一点，请求少一点，动效少一点。但用户体验，一点都不能少。