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

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

本文由 hunsh 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jun 14, 2021 at 12:56 pm

← → ↓ ↑
Responses