h5開發坑點小總結

mton95發表於2019-01-04
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 (){}); //...空函式即可
複製程式碼

相關文章