移動端瀏覽器爬坑之旅

標籤：

　　以前總覺得移動端頁面也很容易寫，最近才下筆，簡直五步一坑，十步一雷。查閱了些資料，整理出了部分瀏覽器安全色性bug。

　　有問題就跟瀏覽器客服提出來，一般他們是會處理的。那麼就以二師兄展開本次分享。

　　

QQ瀏覽器X5核心問題匯總https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/瀏覽器

因為瀏覽器屏蔽了一部分連結圖片，所以需要引導使用者去開啟新頁面，可以用以下方式判斷瀏覽器的ua

function is_weixn(){    var ua = navigator.userAgent.toLowerCase();    if(ua.match(/MicroMessenger/i)=="micromessenger") {        return true;    } else {        return false;    }}

後端判斷也很簡單，比如php

function is_weixin(){    if ( strpos($_SERVER[‘HTTP_USER_AGENT‘], ‘MicroMessenger‘) !== false ) {            return true;    }      return false;}

【UC瀏覽器】video標籤脫離文檔流

情境：標籤的父元素(祖輩元素)設定transform樣式後，標籤會脫離文檔流。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解決方案：不使用transform屬性。translate用top、margin等屬性替代。

【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象

情境：設定了position: fixed 的元素會遮擋z-index值更高的同輩元素。

　　　在8.6的版本,這個情況直接出現。

　　　在8.7之後的版本,當同輩元素的height大於713這個「神奇」的數值時,才會被遮擋。

測試環境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

 

【QQ手機瀏覽器】不支援HttpOnly

情境：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效。JavaScript可以直接讀取設定了HttpOnly的Cookie值。

測試環境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。

 

【MIUI原生瀏覽器】瀏覽器地址欄hash不改變

情境：location.hash 被賦值後，地址欄的地址不會改變。

　　　但實際上 location.href 已經更新了，通過JavaScript可以順利擷取到更新後的地址。

　　　雖然不影響正常訪問，但使用者無法將訪問過程中改變hash後的地址存為書籤。

測試環境：MIUI 4.0

 

【Chrome Mobile】fixed元素無法點擊

情境：父元素設定position: fixed;

　　　子項目設定position: absolute;

　　　此時，如果父元素/子項目還設定了overflow: hidden 則出現“父元素遮擋該子項目“的bug。

　　　視覺(view)層並沒有出現遮擋，只是無法觸發綁定在該子項目上的事件。可理解為：「看到點不到」。

補充： 頁面往下滾動，觸發position: fixed;的特性時，才會出現這個bug，在最頂不會出現。

測試平台： 小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解決辦法： 把父元素和子項目的overflow: hidden去掉。

 

使用zeptojs內嵌到android webview影響正常滾動時

https://github.com/madrobby/zepto/blob/master/src/touch.js 去掉61行,其實就是使用原生的滾動

iscroll4

iscroll4 的幾個bug(來自 http://www.mansonchor.com/blog/blog_detail_64.html 內有詳細講解)

1.滾動容器點擊input框、select等表單元素時沒有響應】

onBeforeScrollStart: function (e) { e.preventDefault(); }

改為

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():‘‘);if(nodeType !=‘select‘&& nodeType !=‘option‘&& nodeType !=‘input‘&& nodeType!=‘textarea‘) e.preventDefault(); }

2.往iscroll容器內新增內容時，容器閃動的bug

原始碼的

has3d = ‘WebKitCSSMatrix‘ in window && ‘m11‘ in new WebKitCSSMatrix()

改成

has3d = false

在配置iscroll時，useTransition設定成false

3.過長的滾動內容，導致卡頓和app直接閃退

1. 不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味著你要消耗一個Interval的記憶體空間
2. 隱藏iscroll捲軸，配置時設定hScrollbar和vScrollbar為false。
3. 不得已的情況下，去掉各種效果，momentum、useTransform、useTransition都設定為false

4.左右滾動時，不能正確響應本文上下拉動

iscroll的閃動問題也與渲染有關係，可以參考 運用webkit繪製渲染頁面原理解決iscroll4閃動的問題 iscroll4升級到5要注意的問題

iscroll或者滾動類架構滾動時不點擊的方法

可以使用以下的解決方案(利用data-setapi)

<a ontouchmove="this.s=1" ontouchend="this.s || window.open(this.dataset.href),this.s=0" target="_blank" data-href="http://www.hao123.com/topic/pig">黃浦江死豬之謎</a>

也可以用這種方法

    $(document).delegate(‘[data-target]‘, ‘touchmove‘, function () {        $(this).attr(‘moving‘,‘moving‘);    })    $(document).delegate(‘[data-target]‘, ‘touchend‘, function () {        if ($(this).attr(‘moving‘) !== ‘moving‘) {         //做你想做的。。            $(this).attr(‘moving‘, ‘notMoving‘);        } else {            $(this).attr(‘moving‘, ‘notMoving‘);        }    })

 

 

以上來源於司徒正美的github
https://github.com/RubyLouvre/mobileHack

移動端瀏覽器爬坑之旅