微信修改字體大小或者開啟關懷模式導致H5頁面錯亂的解決方案

位置:首頁 / 新聞中心 / 知識教程

知識教程 Admin 2024-02-22 11:03:27 1465

原因 當微信內修改默認字體大小或者開啟微信內關懷模式,由于H5頁面是在微信內置瀏覽器中打開,所以字體也會隨之修改,導致頁面布局改變。

解決方案 需要給安卓、ios同時添加配置,禁止內置瀏覽器修改H5頁面。在vue中,我們給public文件夾下的index.html添加配置


安卓:

在script標簽內添加方法,通過方法進行配置

 (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 })

              })

          }

      })()


蘋果:

  • ios 在style標簽內添加樣式,通過修改樣式進行配置

     body { /* IOS禁止微信調整字體大小 */

                -webkit-text-size-adjust: 100% !important;

                text-size-adjust: 100% !important;

                -moz-text-size-adjust: 100% !important;

            }


    以上就是“微信修改字體大小或者開啟關懷模式導致H5頁面錯亂的解決方案”的詳細內容,更多請關注木子天禾科技其它相關文章!

以上就是“微信修改字體大小或者開啟關懷模式導致H5頁面錯亂的解決方案”的詳細內容,更多請關注木子天禾科技其它相關文章!

15934152105 掃描微信