上周接了个移动端H5的活儿，甲方说要做个产品展示页。我寻思着这不挺简单么，打开编辑器哐哐就开始写代码。结果测试时候直接翻车，手机上看排版乱得像被猫抓过的毛线团！气得我差点把键盘砸了。

踩坑全记录

第一脚就掉进坑里：写完页面在电脑浏览器上看美滋滋，结果传到手机微信里打开——好家伙！页面宽度直接撑爆屏幕，手指得左右划拉八百米才能看完一行字。赶紧问老司机，才知道得在HTML头上加一行咒语：name="viewport" content="width=device-width"。这玩意儿能让页面自动适应手机屏幕，就跟给网页穿了个弹性小背心似的。

第二个雷踩得噼啪响：用了堆花里胡哨的CSS3动画，在我这iPhone上丝滑得要命。发给用安卓机的甲方爸爸看，人家微信点开直接卡成PPT！原来低端机根本扛不住复杂特效。连夜把粒子特效换成简单位移，又把图片压缩到妈都不认识。血泪教训：动画能简则简，图片必须往死里压！

吐血整理的避雷清单

• 字体坑死人：非用苹方字体，结果安卓机上全变宋体。老老实实加font-family后备方案："PingFang SC", "Microsoft YaHei", sans-serif，管你什么手机至少能看
• 点击延迟要命：按钮点了老半天没反应，用户以为手机死机。上FastClick库瞬间解决，手指刚碰上就触发，跟抹了润滑油似的
• 微信浏览器是魔鬼：上传图片死活调不起相机，原来得用capture="camera"属性。微信里缓存还特别顽固，每次更新代码都得让用户清微信缓存，这事我打印出来贴显示器上了
• 手指头有胖有瘦：设计时把按钮做得贼小还挤在一起，测试时用我媳妇的肉手根本点不准。所有点击区域不小于44x44像素，间隔能塞下米粒才罢休

最蠢的是栽跟头：页面都上线了客户打电话吼：“分享到朋友圈咋没标题没缩略图？！” 原来微信要单独配分享信息。连夜在页面里埋了*配置，还专门做了个300x300的分享图标。所以说，微信这货跟普通浏览器根本不是一个物种！

现在做完复盘简直想抽自己：这四个雷但凡躲开一个，也不至于熬夜改七遍。新手记住咯——H5看着简单，坑全藏在手机底下！