起手就被坑惨了
那天客户催着交个手机版网页，我寻思ios不就是调调css嘛结果在自家安卓机上跑得溜光水滑的页面，扔到同事iphone上直接崩成狗。按钮点不动，图片乱飘，下拉还能卡出闪退。我蹲厕所刷手机半小时都没想明白——这不就是个活动页吗？
第一个跟头：糊字体
熬夜改到两点半，突然发现iphone上的字糊得像隔夜粥。百度说要用-webkit-font-smoothing这玩意儿，试了半天发现得这么写：
- body { -webkit-font-smoothing: antialiased; }
- 按钮再加个 -webkit-font-smoothing: subpixel-antialiased;
调完对着屏幕比划半天，字儿终于不发光晕了，跟安卓效果勉强对齐。这时候窗外扫大街的车都开始嗡嗡响了。
第二个坑：点不着的按钮
第二天测试又拍桌喊按钮失灵，点十次才响应一次。翻烂了苹果开发者论坛，原来ios有个神奇点击延迟！解决办法粗暴得我想笑：
- button { cursor: pointer; } 根本不管用
- 必须给按钮套层div！在div上加ontouchstart=""
- 或者直接写
加上这行代码那刻，手指头戳屏幕的声音听着都比原来脆生。
最阴的陷阱：橡皮筋效应
当我觉得完事儿准备提交时，实习生突然把页面拉到顶再猛拽——整个页面背景露出大白边，跟破洞裤似的。搜“ios 阻止页面回弹”跳出来二十几种方案，试到第九个终于管用：
- body设置 overflow: hidden 根本挡不住
- 得在包裹层写 height:100vh; overflow: hidden
- 滚动区域单独设 scroll-y: auto
测试时把手机往桌上怼着划拉，大白边总算被焊死在屏幕外。
血泪换来的偷懒技巧
现在每次做h5都三步走保命：
- 开工先灌这行代码：meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
- 测试时左手捏安卓右手抓苹果，页面滑动速度调三档对比
- 备个二手iphone6专门卡bug，这老机器比x光机还灵
上周新项目上线前检查，我让实习生用手指关节敲击所有按钮，验收通过那刻感觉比拿了年终奖还舒坦——至少不用再通宵填苹果的坑了。
