你必定踩過的微信H5的坑

1. IOS的input光標高度問題

問題：IOS的input框高度會默認佔滿父盒子的高度，致使光標也會撐滿整個input框

解決：父盒子使用上下padding撐開，不使用行高(line-height)居中

2. IOS微信h5頁面上下滑動時卡頓，頁面缺失

問題：若是頁面高度超出了一屏，滑動頁面就會出現卡頓，有時會有頁面顯示不全的狀況

分析：蘋果微信瀏覽器內核使用自帶的safari，須要overflow-scrolling開啓回彈效果

解決：*{ -webkit-overflow-scrolling: touch }

注意：若是頁面中有絕對定位的節點，該節點的顯示會錯亂

3.IOS鍵盤喚起，鍵盤收起之後頁面不歸位

問題： 輸入內容時，鍵盤彈出，頁面內容總體上移，可是鍵盤收起，頁面內容沒法歸位

分析：input聚焦時，彈出的軟鍵盤佔位，失去焦點時軟鍵盤消失，但仍是佔位的，致使input框不能再次輸入

解決： 監聽input的blur方法，失去焦點時，用js滾動頁面

4. Android彈出的軟鍵盤遮蓋文本框

問題：安卓微信h5頁面太長時彈出軟鍵盤後會擋住input輸入框

解決：給input和textarea標籤添加focus事件，聚焦時延時滾動

5. IOS去除input默認陰影失效

問題：通常去除input陰影咱們能夠使用outline: none; 也能夠使用border: 0;可是咱們有時候須要border的狀況下，只能使用outline: none; 安卓能夠生效，IOS發現陰影還在?

解決：使用-webkit-appearance: none; 便可去除input默認陰影