由于微信字体大小的设置导致rem布局的微信公众号页面发生错乱的问题总结

最新推荐文章于 2023-11-02 11:29:39 发布

wdcc.fade

最新推荐文章于 2023-11-02 11:29:39 发布

阅读量2.8k

点赞数 1

文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_45915537/article/details/107378917

版权

本文探讨了微信应用中由于字体设置导致的rem布局错乱问题，特别是在微信环境中，字体大小变化会影响rem比例，进而引起页面适配混乱。为解决此问题，提出了通过获取微信字体缩放比例scale，并将其倒数与rem比例相乘，以恢复rem正常值的方法。具体实现包括创建不可见div，计算缩放后的宽度和html字体大小，从而计算得到scale值。

摘要由CSDN通过智能技术生成

微信应用中由于字体设置的问题导致的页面错乱适配

上一篇文章中总结了在手机端怎么通过rem 动态设置html 的fontSize 值，解决手机端的适配问题，但是在微信中有一个特例。

一般情况下，在rem布局中 rem的相对大小只受到html 标签的fontSize 影响，但是在微信中设置字体的大小也会影响到 rem 的比例，所以在微信应用页面中通过rem 适配的页面就会发生一些不可预料的错乱。
为了解决上述问题就需要在动态调取setFont函数时获取到微信调整字体的比例的倒数 scale，然后给rem 的比例还原，为了使rem 的值恢复正常就得和scale想乘。

  function setFont() {
   
    let scale = toScale()   //计算出微信字体设置的缩放比例
    let html = document.documentElement
    let k = IBOX.config.designWidth || 640
    
    html.style.fontSize = (html.clientWidth / k * 100)*scale + 'px' //乘以scale ,rem的值将恢复正常
  }

如何获取到scale的大小呢？

思路：1. 通过创建一个div标签设置为不可见宽度设置为 1rem，并获取其宽度 instanceWidth（获取到的宽度是以px 为单位的），这便是缩放之后的宽度，2.再获取html元素的字体大小 htmlFontSize（也是以px为单位的）。正常情况下，1rem 就等于 htmlFontSize，当被缩放后其并不相等，scale = scale = htmlFontSize / instanceWidth

具体实现如下：