# 常见坑 ## css * 使用rem时，设某个div比如的`height:3rem;line-height:1.5rem;overflow:hidden;`时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用js获取文字`line-height`再去设置div高度 * 使用background时，background-position里使用了比如center left后不能再加具体的数值去定位，比如center 10px left（暂时兼容性差） * 使用rem布局时，由于webkit支持的最小字体大小是12px，所以使用html使用62.5%实际是12px，这样很难计算，我的做法是设置成625%即100px，然后1rem就相当于100px * 移动端字体使用 font-family: Helvetica,sans-serif;我看这也是天猫使用的 ## js * 有些版本的iphone4中， audio和video默认播放事件不会触发，比如使用window.onload或计时器等都不能触发播放，必须用JS写事件让用户手动点击触发才会开始播放，比如 ```javascript $(document).one('touchstart',function(){ audio.play(); }) ``` * 点击一个元素时，使用touchstart会立即触发，而使用click则用有大概0.3s的延迟 想模拟一个立即触发的点击事件有两种方法，`fastclick.js`和`zepto.js`里的tap事件。 不过zepto的tap事件有一个事件穿透的问题。假如你tap一个弹出层元素（这个元素遮罩了一个a标签），这个元素立即消失，这样由于上述的0.3s延迟tap事件就会传递给a标签成click事件造成a标签跳转。 以上面的例子来说，解决方案视情况而定： ① tap时让遮罩渐隐消失，这个过程超过400ms就不会穿透到下一层去了 ② 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。（这个没用过） ③ 有的时候比如弹出一个iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定touchend也是和tap差不多的效果 * 当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加touchmove事件即可，用e.preventDefault()会阻止的scroll，click等事件，消失时再off掉， ```javascript $(".body_cover").on("touchmove", function(e) { e.preventDefault(); }); ``` * 使用input file上传文件时，可以指定接受的类型，accept="image/png,image/jpeg,image/gif"，同时在android上默认不能使用相机，可以加capture="camera"同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。