1. 程式人生 > >禁止微信內建瀏覽器調整字型大小

禁止微信內建瀏覽器調整字型大小

微信webview內建了調整字型大小的功能,使用者可以根據實際情況進行調節。

但是這也會導致字型大小改變以後,出現頁面佈局錯亂的情況,目前iOS的解決方案是覆蓋掉微信的樣式:

body { /* IOS禁止微信調整字型大小 */
    -webkit-text-size-adjust: 100% !important;
}

安卓的解決方案是通過 WeixinJSBridge 物件將網頁的字型大小設定為預設大小,並且重寫設定字型大小的方法,讓使用者不能在該網頁下設定字型大小:

/*
* android禁止微信瀏覽器調整字型大小

*  這種方法會導致網頁延遲大約1S

*/
(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

    });

  });

  }
})();