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)

 

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的效果!

 
<script type="text/javascript">
 document.getElementById('testInput').addEventListener('input', function(e){
   var value = e.target.value;
 });
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章