微信修改字體大小或者開啟關(guān)懷模式導(dǎo)致H5頁面錯亂的解決方案

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

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

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

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


安卓:

在script標(biāo)簽內(nèi)添加方法,通過方法進(jìn)行配置

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

              // 設(shè)置網(wǎng)頁字體為默認(rèn)大小

              WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })

              // 重寫設(shè)置網(wǎng)頁字體大小的事件

              WeixinJSBridge.on('menu:setfont', function () {

                  WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })

              })

          }

      })()


蘋果:

  • ios 在style標(biāo)簽內(nèi)添加樣式,通過修改樣式進(jìn)行配置

     body { /* IOS禁止微信調(diào)整字體大小 */

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

                text-size-adjust: 100% !important;

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

            }


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

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

15934152105 掃描微信