乐趣区

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

jiezi

用户反馈

用户机型：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`;
}

最后

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

退出移动版