部分机型webview内rem计算不准导致页面变宽

用户反馈

用户机型：HUAWEI Mate 30 pro 5G
运行环境：APP内WebView页面
反馈问题：页面宽度超出屏幕宽度

定位问题

1. 寻找测试手机复现问题，未果；
2. 我们的页面是用的 rem 来做的适配；
3. 可能是WebView的 fontSize 计算不准导致的；
4. html 节点的 fontSize 值应该不是我计算后设置的值；
5. 想到去获取一下这个真实的 fontSize ，如果大于我计算后设置的值的话那么问题就定位到了；
6. 假设5成立，计算出如下关系（验证后发现5是成立的）。

假设根节点实际 fontSize 为 realFS，计算得到的为 calcuFs

得出如下关系：realFS / calcuFs = 缩放比例
calcuFs / x = 缩放比例
x = (calcuFs * calcuFs) / realFS

上面计算出的 x 为我们在这个缩放比例下得到的合适的 fontSize 值，当fontSize没有被缩放时 realFS === calcuFs 则 x === calcuFs.

如何获取realFS呢？

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

这样就能得出realFS和calcuFs

const html = document.getElementsByTagName('html')[0];
const realFs = parseFloat(window.getComputedStyle(html).fontSize);
const calcuFs = parseFloat(document.documentElement.style.fontSize);

最终实现如下

const html = document.getElementsByTagName('html')[0];
const realFs = parseFloat(window.getComputedStyle(html).fontSize);
const calcuFs = parseFloat(document.documentElement.style.fontSize);
if (realFs !== calcuFs) {
   const newFs = (calcuFs * calcuFs) / realFs;
   document.documentElement.style.fontSize = `${newFs}px`;
}

最后

找到反馈问题的用户，完美解决