getComputedStyle 宽度和高度在真实 Android 设备上的 chromium webview 中不起作用答案

【问题标题】：getComputedStyle width and height not working in chromium webview on real Android devicesgetComputedStyle 宽度和高度在真实 Android 设备上的 chromium webview 中不起作用
【发布时间】：2016-09-01 03:40:12
【问题描述】：

我有这个 javascript 函数：

function onFontLoad(cb,font,size,table,interval)
{
var div=document.createElement("div");
div.style.fontFamily=font;
div.style.fontSize=size;
div.style.position="absolute";
div.style.top="-100px"
div.style.left="-100px"
document.body.appendChild(div);
var checkInterval=setInterval(function()
{
    for(character in table)
    {
        div.textContent=character;
        var t=table[character];
        var s=getComputedStyle(div);
        if(parseInt(s.width)!=t[0]||parseInt(s.height)!=t[1]) return;
    }
    div.parentNode.removeChild(div);
    clearTimeout(checkInterval);
    cb();
},interval||200);

因为 android 中的 webview 是基于 webkit 的，所以它可以工作。由于 WebView 已更改为 chromium，因此即使在 Chromium 浏览器中，我的功能也停止工作。我建议使用 Math.ceil 进行舍入，同时避免使用 parseInt。

现在我有了这个功能：

function onFontLoad(cb, font, size, table, interval) {
var div = document.createElement("div");
div.style.fontFamily = font;
div.style.fontSize = size;
div.style.position = "absolute";
document.body.appendChild(div);
var getRawPixels = function (cssUnit) {
    // Round up to the highest unit.
    var re = /([\d.]+)(px)/; // css measure units.
    var results = cssUnit.replace(re, "$1");
    return Math.ceil((results * 10) / 10) ;
};
var checkInterval = setInterval(function () {
    for (var character in table) {
        div.textContent = character;
        var t = table[character];
        var s = getComputedStyle(div);
        if (getRawPixels(s.width) != t[0] || getRawPixels(s.height) != t[1]) return;
    }
    div.parentNode.removeChild(div);
    clearTimeout(checkInterval);
    cb();
}, interval || 200);

并且功能现在在 Chromium 浏览器或 Android（从 4.4 到 6 个模拟器）中按预期工作，我对模拟器中的 webview 渲染没有任何问题。但是在某些真实设备上它是空白的，即使没有 webview 硬件加速。（主要是 android 5.x 设备）但我很高兴画布渲染没有问题，因为如果我评论或删除这个字符串：

  if (getRawPixels(s.width) != t[0] || getRawPixels(s.height) != t[1]) return;

即使使用我测试应用程序的真实 android 设备，Webview 也会再次按预期开始渲染，但不会应用 onFontLoad 函数中的样式。

我在处理过程中发现的另一件事是 Chrome 开发者工具中损坏的 webview 在 div 之后添加了<i>。但是在模拟器中运行的相同代码可以很好地显示画布，并且在 div 之后没有任何<i>。但是，如果我删除带有 div 位置的字符串，我可以在模拟器中破坏画布。在这个厄运行动之后，我也会在 div 之后的页面源代码中看到<i>。

此外，我发现 Chromium 过去在 getComputedStyle 方面也存在一些问题。但我认为 getComputedStyle 工作正常。

【问题讨论】：

标签： javascript webview

【解决方案1】：

这是 div 隐藏的东西。我刚刚删除了隐藏，因为在隐藏 div 后用画布中的应用程序破坏了自己。简单确实是其中的关键。

function onFontLoad(cb, font, size, table, interval) {
    var div = document.createElement("div");
    div.style.fontFamily = font;
    div.style.fontSize = size;
    //div.style.position = "relative";
    document.body.appendChild(div);
    var checkInterval = setInterval(function () {
        for (var character in table) {
            div.textContent = character;
            var t = table[character];
            var s = getComputedStyle(div);
        }
        clearTimeout(checkInterval);
        cb();
    }, interval || 200);
}

【讨论】：