# 常見坑 ## 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元素的點擊。