h5頁面在iOS上的問題解決

1、ios移動端 軟鍵盤收起后，頁面內容被頂上去，不下滑回原處

代碼如下：

$(function(){ $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); }); })

原理就是彈起鍵盤的時候，window.scrollY會從0變到鍵盤的高度（例如：200），當輸入框焦點失去后讓scrollY回到0就好了。

但是有一個很嚴重的問題：如果頁面上有按鈕需要操作 ，例如，評論的輸入框+發布按鈕，輸入完文字，點擊“發布”，觸發click事件的時候，會導致頁面先觸發blur事件，鍵盤回落，然后一切就結束了。。。。按鈕點擊沒有起任何作用。

解決方案： 把click事件更換成ontouchstart 可以解決這個問題。 ontouchstart 事件優於click事件觸發。

 

2、移動端 input,按鈕等樣式在安卓與ios上不同的解決方案

input,select,button{ 　　-webkit-appearance:none; 　　appearance:none;
}

去掉 IOS默認樣式即可

 

3、IOS上下拉動滾動條時卡頓、慢

body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch;

}

 

4、ios頁面拖動問題

body {
/* 當手指從觸摸屏上移開，滾動會立即停止 */ -webkit-overflow-scrolling: auto overflow-scrolling: auto }

 

5、iphone及ipad下輸入框默認內陰影

-webkit-appearance: none;

 

6、日期問題

對於yyyy-mm-dd hh:mm:ss 這種格式在ios系統不識別。

時間格式化的時候，在瀏覽器端處理好好的，到了手機端，就變成NAN，或者null，這種情況，是ios系統不能轉化這種類型的時間。

let date = new Date('2019-02-28 18:33:24');    // null

解決方案：轉成 yyyy/mm/dd hh:mm:ss 這種格式就可以了。

replace(/-/g, "/")

7、ios在微信小程序的webview，鍵盤收回，頁面底部會留白

這個問題懷疑是頁面的scroll設置了auto導致的。

解決思路：

復現該bug以后發現只要滾動一下頁面就可以使頁面恢復正常，於是就想可不可以在input失去焦點以后調用一下頁面滾動，來完成該操作，發現果然可以。然后就產生了如下代碼

temporaryRepair(){ var currentPosition,timer; var speed=1;//頁面滾動距離
    timer=setInterval(function(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop; currentPosition-=speed; window.scrollTo(0,currentPosition);//頁面向上滾動
        currentPosition+=speed; //speed變量
        window.scrollTo(0,currentPosition);//頁面向下滾動
 clearInterval(timer); },1); }

 

8、iphone fixed 失效，導致一些機器上textarea光標偏移

解決方案： 所有兄弟元素變成absolute， 父元素overflow:auto。

父元素{ height: 100vh; position: relative; overflow: auto;} 兄弟元素{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-x: visible; overflow-y: auto; padding-bottom: 10px; z-index: 1;}

 

9、鍵盤遮擋輸入框

輸入框如果使用了fixed固定在底部，鍵盤頂起的時候，iphone上fixed會失效，導致頁面滾動輸入框會隨着頁面滾動，並且在部分機型上，輸入框偶爾會被鍵盤遮擋，這種偶現的問題，很不友好。

解決方案： 放棄使用fixed布局，頁面如果有滾動，也放棄absolute，如果強行要使用absolute，請參考上一條光標偏移。建議使用flex布局，兼容性會得到解決。

當然，如果遇到以上這些問題，說明產品設計就很不合理，如果必要的話，還是要更換設計，改成input不需要被鍵盤頂起的設計，這些兼容性的解決方案，也不並不能完美的解決所有機型的問題。

 

10、ios和android下觸摸元素時出現半透明灰色遮罩

-webkit-tap-highlight-color:rgba(255,255,255,0);
或者：
-webkit-tap-highlight-color:transparent;

 

11、頂部狀態欄背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

說明：

除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta標簽不會起任何作用。

 如果content設置為default，則狀態欄正常顯示。如果設置為blank，則狀態欄會有一個黑色的背景。如果設置為blank-translucent，則狀態欄顯示為黑色半透明。

 如果設置為default或blank，則頁面顯示在狀態欄的下方，即狀態欄占據上方部分，頁面占據下方部分，二者沒有遮擋對方或被遮擋。

 如果設置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。

 默認值是default。

 

12、IOS中input鍵盤事件keyup、keydown、keypress支持不是很好

 問題是這樣的，用input search做模糊搜索的時候，在鍵盤里面輸入關鍵詞，會通過ajax后台查詢，然后返回數據，然后再對返回的數據進行關鍵詞標紅。

 用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之后，並未立刻相應keyup事件，只有在通過刪除之后才能相應！

 解決辦法：

可以用html5的oninput事件去代替keyup，然后就達到類似keyup的效果！

<input type="text" id="testInput">
<script type="text/javascript"> document.getElementById('testInput').addEventListener('input', function(e){ var value = e.target.value; }); </script>

 13、禁用長按頁面時的彈出菜單

img,a{ -webkit-touch-callout: none;
}