微信网页开发文字大小适配

in 默认分类 with 0 comment

最近遇到了一些问题,总结一下

X5内核的rem貌似有一个极小值

复现方式

html {
    font-size: 1vw;
}
body {
    background: #555;
    width: 100rem;
    height: 100vh;
}

页面宽度会超出一个屏幕宽度,而且很多!

如果用户在微信内调整了字体大小,会导致font-size成比例变化

比如字体调整为标准+1档,<html style="font-size: 100px">的实际font-size将变成110px

有一些场景是不能够允许字体变化的,所以需要特殊处理

我们可以计算期望的属性值,然后在赋值后通过Window.getComputedStyle获得实际属性,通过倍率是否在1附近来判断是否进行了文字大小缩放。如果有缩放,提前除倍数即可。

(() => {
      const width = document.documentElement.clientWidth
      const height = document.documentElement.clientHeight
      const radio = width / height
      // let fontSize = radio > .9 ? '70vh' : '100vw'
      const expected = radio > .9 ? .7 * height : width
      const real = parseInt(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[0])
      const multi = (real / expected).toFixed(2)
      if (Math.abs(multi - 1) > 0.08) {
        document.getElementsByTagName("html")[0].style.fontSize = radio > .9 ? `${70*multi}vh` : `${1070*multi}vw`
      }
    })()
Responses