防止 Android Webview 更改字体大小（计算样式）答案

【问题标题】：Prevent Android Webview from changing font-size (Computed Style)防止 Android Webview 更改字体大小（计算样式）
【发布时间】：2013-05-22 13:16:40
【问题描述】：

我有一个由 Android 应用程序通过 Webview 组件显示的网页。

它决定更改字体大小，因此 16px 的文本具有 font-size=14px（我可以在使用 weinre 检查元素时看到它。它有 16px，但在计算样式中它有 14px）。

我不希望 Webview 决定什么更好。那么我该如何解决这个问题呢？

备注：在这种特定情况下，更改会导致文本不垂直对齐，因为更改后 line-height 不会调整 font-size。这只是其中一种情况，我想阻止 Webview 更改 css 值。

【问题讨论】：

webview 使用什么元标签？例如视口？
你的意思是html元标签吗？网页有<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

标签： android css

【解决方案1】：

这个问题似乎是由于 WebView 尊重系统字体大小设置（可以在以下位置更改：设置 > 显示 > 字体大小）。

已经在各个地方提交了几个错误报告 (for example)

为了重现该问题，您必须将系统字体大小缩小到较小或最小。

...

好的，如果我更改设置 > 显示 > 字体大小，我可以重新制作。它不会在 Chrome 中重现，但 Chrome 似乎一开始就不尊重“字体大小”。我现在很忙，所以可能需要一段时间才能进一步调查。

尝试将您的系统字体大小设置为“小”或“中”并测试您的应用。

【讨论】：

【解决方案2】：

此问题仅影响在 webview 中查看的页面，而不影响 android 浏览器。它可能只影响一部分设备。有没有其他人看到过这个问题？

我看到我的设备转换字体如下：

16px -> 14px
14 像素 -> 12 像素
12 像素 -> 10 像素

我正在尝试强制我的页面在所有设备上呈现 12 像素的字体。这是一个潜在的解决方案（使用 jQuery）：

$(document).ready(function()
{
    //set font-size to 12px
    $('html').css('font-size', "12px")

    //See what font-size is computed by the webview
    var fs = parseFloat($('html').css('font-size'));

    //If the webview is being naughty, compensate for it
    if (fs == 10) 
    {
        $('html').css('font-size', "14px");
    }
}

【讨论】：

【解决方案3】：

我遇到了相同的行为，并通过更改 WebView 设置中的 TextZoom 解决了它。在我的应用程序上，默认值似乎与系统字体大小设置相关联。将其设置为 100 以防止 webview 更改字体大小。

https://developer.android.com/reference/android/webkit/WebSettings#setTextZoom(int)

【讨论】：