微信修改字体大小或者开启关怀模式导致H5页面错乱的解决方案

位置:首页 / 新闻中心 / 知识教程

知识教程 Admin 2024-02-22 11:03:27 2637

原因 当微信内修改默认字体大小或者开启微信内关怀模式,由于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 扫描微信