h5開發坑點小總結

平時在開發h5項目中，遇到一些h5的小坑，在此分享(2.17 update again)。

博客維護在 github 上，喜歡的歡迎給個star!

1.微信端禁止頁面分享

//隱藏微信分享菜單，當點擊右上角時不會出現分享的選項
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    });
複製代碼

2.禁止頁面上下拉動

//禁止頁面上拉下拉
    document.body.addEventListener('touchmove', function (e) {
        e.preventDefault(); //阻止默認的處理方式
    }, {passive: false}); //passive 參數不能省略，用來兼容ios和android
複製代碼

3.禁止頁面上下拉，但不影響頁面內部scroll

2.20號 在某個微信羣裏關注到第2點的代碼會影響頁面內部的scroll，用以前的項目測試了一下，確實如此。

但若是去掉第2點的代碼，雖然內部的scroll能夠正常使用了，但橡皮筋的效果出現了。

這怎麼能忍呢？因而遍尋良藥：

var overscroll = function(el) {
//el須要滑動的元素
        el.addEventListener("touchstart", function() {
          var top = el.scrollTop,
            totalScroll = el.scrollHeight,
            currentScroll = top + el.offsetHeight;
//被滑動到最上方和最下方的時候
          if (top === 0) {
            el.scrollTop = 1; //0～1之間的小數會被當成0
          } else if (currentScroll === totalScroll) {
            el.scrollTop = top - 1;
          }
        });
        el.addEventListener("touchmove", function(evt) {
          if (el.offsetHeight < el.scrollHeight) evt._isScroller = true;
        });
      };
      overscroll(document.querySelector(".aaaa")); //容許滾動的區域
      document.body.addEventListener("touchmove",function(evt) {
          if (!evt._isScroller) {
            evt.preventDefault(); //阻止默認事件(上下滑動)
          }
        },
        { passive: false } //這行依舊不能夠省略，用於兼容ios
      );
複製代碼

4.禁止微信瀏覽器圖片長按出現菜單

網上挺多代碼無效，下面親測有效（兼容ios與android）

img{
    pointer-events:none;
    -webkit-pointer-events:none;
    -ms-pointer-events:none;
    -moz-pointer-events:none;
}
複製代碼

5.禁止微信瀏覽器長按「顯示在瀏覽器打開」

document.oncontextmenu=function(e){
       //或者return false;
      e.preventDefault();
    };
複製代碼

6.禁止複製文本

-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
複製代碼

7.禁止瀏覽器調整字體大小

ios解決方案：

body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}
複製代碼

android解決方案（用自執行函數強制禁止用戶修改字體大小）：

(function () {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        if (document.addEventListener) {
            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", handleFontSize);
            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        }
    }

    function handleFontSize() {
        // 設置字體爲默認大小而且重寫事件
        WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
        WeixinJSBridge.on('menu:setfont', function () {
            WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
        });
    }
})();
複製代碼

8.移動端僞類:active無效的解決方法

作項目作到一半，測試按鈕點擊態的時候，在PC和安卓機測試上都沒有問題，但到ios移動端就出現無效的狀況，google了一下。

在mozilla社區找到了答案：

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the .

須要在按鈕元素或者body/html上綁定一個touchstart事件才能激活:active狀態。

document.body.addEventListener('touchstart', function (){}); //...空函數便可
複製代碼