常見移動端兼容問題以及解決方案

IOS上click點擊事件會有300ms的延遲響應:

換用zepto的touch模塊,tap事件也是爲了解決在click的延遲問題
或者引入fastclick.js解決

移動端頁面滾動滯澀感

css在body元素上添加-webkit-overflow-scrolling: touch;

軟鍵盤與輸入框問題

h5頁面有個問題就是,當輸入框在最底部,點擊軟鍵盤後輸入框會被遮擋。可採用如下方式解決:

var oHeight = $(document).height(); //瀏覽器當前的高度
   
$(window).resize(function(){
   
   
    if($(document).height() < oHeight){
   
   
        $("元素").css("position","static");
    }else{
   
   
        $("元素").css("position","absolute");
    }    
});

另一軟鍵盤輸入框問題,也可視爲fixed定位失敗問題,ios下fixed元素容易定位出錯,軟鍵盤彈出時,影響fixed元素定位
1、雖然 isScroll.js 可以很好的解決 fixed 定位滾動的問題,但是不在萬不得已的情況下,我們儘量嘗試一下不依賴第三方庫的佈局方案,以簡化實現方式。

解決思路:

既然在 iOS 下由於軟鍵盤喚出後,頁面 fixed 元素會失效,導致跟隨頁面一起滾動,那麼假如——頁面不會過長出現滾動,那麼即便 fixed 元素失效,也無法跟隨頁面滾動,也就不會出現上面的問題了。配合移動端頁面滾動滯澀感的解決思路css在body元素上添加-webkit-overflow-scrolling: touch;
如果考慮到更老一些的 iOS 系統不支持 fixed 元素,完全可以把 fixed 替換成 absolute 。測試後效果是一樣的。

談到了 iOS ,也來簡單說一下 Android 下的佈局吧。

在 Android2.3+ 中,因爲不支持 overflow-scrolling ,因此部分瀏覽器內滾動會有不流暢的卡頓。但是目前發現在 body 上的滾動還是很流暢的,因此使用第一種在 iOS 出現問題的 fixed 定位的佈局就可以了。

如果需要考慮 Android2.3 以下系統,因爲不支持 fixed 元素,所以依然要需要考慮使用 isScroll.js 來實現內部滾動。

其實在 fixed 和輸入框的問題上,基本思路就是: > 由於 fixed 在軟鍵盤喚起後會失效,導致在頁面可以滾動時,會跟隨頁面一起滾動。因此如果頁面無法滾動,那麼 fixed 元素即使失效,也不會滾動,也就不會出現 bug 了。

所以可以在這個方面去考慮解決問題。

至此一個不依賴第三方庫的 fixed 佈局就完成了

// 處理iOS 微信客戶端彈窗狀態下調起輸入法後關閉輸入法頁面元素錯位解決辦法
    var ua = window.navigator.userAgent.toLowerCase();
    if (/iphone|ipod|ipad/i.test(navigator.appVersion) && /MicroMessenger/i.test(ua)) {
   
   
      document.body.addEventListener('focusout', () => {
   
   
        console.log('focusout')
        window.scrollTo({
   
    top: 0, left: 0, behavior: 'smooth' })
      });
    }
    //或者:
    scrollto0() {
   
   
      window.scrollTo(0, 0);
    }

阻止旋轉屏幕時自動調整字體大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
   
   -webkit-text-size-adjust:none;}

移動端某些情況下input的placeholder會出現文本位置偏上的現象:

PC端設置line-height等於height能夠對齊,而移動端仍然是偏上,解決是設置line-height:normal

修改移動端的點擊高亮效果

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

zepto的點透問題

引入fastclick.js,在頁面中加入如下js代碼

window.addEventListener( "load", function() {
   
   
     FastClick.attach( document.body );
}, false );
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章