Android WebView 在某些设备上出现异常大的缩放级别和字体大小答案

【问题标题】：Android WebView abnormal large zoom level and font sizes on some devicesAndroid WebView 在某些设备上出现异常大的缩放级别和字体大小
【发布时间】：2017-09-13 17:36:22
【问题描述】：

我有一个使用 Titanium SDK 5.5.1 的旧版 Android Titanium 应用程序（我不能使用 SDK 6+，因为代码使用了 Ti.include）。该应用程序使用 WebView 来显示本地 CSS 样式的 html 内容。最近，一些运行 Android 6+ 的 Android 设备突然开始使用巨大的字体显示 WebView 内容，这些字体会在屏幕上填满几句话。这会在某些设备上发生，但在其他设备上不会发生，我无法在我用于测试的设备（运行 Android 7.0 的三星 Galaxy S7）或任何模拟器（Genymotion 或内置 Android SDK）上复制它。

我已经尝试了我能想到的一切。我使用各种选项设置元视口 - 目前如下，根据 Android 建议：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

我尝试将 width=device-width 添加到内容中，但这并没有什么不同，显然它是推断出来的，并且在使用 initial-scale=1.0 时没有必要。

我还在 div 类和包装 div 类的页面样式标题中将 font-size CSS 属性硬编码为设置的像素大小，但仍然没有运气。

body {font-size:13px;}
.contentClass {font-size:13px;}

我还尝试将 WebView scalesToFit 属性从 false（旧设置）更改为 true，但没有区别。似乎没有任何效果，某些设备上的字体仍然很大。

WebView创建代码如下，没什么特别的：

var webView = Ti.UI.createWebView({
        top:0,
        html:htmlContent,
        width: Titanium.UI.FILL, //webview is added to main window which is the set to device screen width
        height: '100%',
        scalesPageToFit: true, //tried false as well
        enableZoomControls: false,
});

该应用有许多活跃用户，他们现在因此而抱怨。由于我无法在我的开发环境中复制该问题，所以我在黑暗中工作。一些遇到这种情况的用户正在帮助我对修复进行 beta 测试，但调试起来非常困难。任何见解将不胜感激。

【问题讨论】：

标签： android webview titanium appcelerator

【解决方案1】：

我找出了这个问题的原因，并认为我会分享我的解决方案。

首先，Android WebViews 使用 Chrome 渲染代理，从 v. 5.0 (Lollipop) 开始，它已移至 Chrome APK，因此可以独立于操作系统进行更新。最近某个时候，Chrome 的新版本导致我的 WebView 停止工作。您可以在此处了解更多信息： https://developer.chrome.com/multidevice/webview/overview

我通过停用测试手机上的 Chrome 发现了这一点。这具有将 Chrome 恢复为设备出厂安装版本的 Chrome 的效果，该版本可能比最新版本旧得多，具体取决于手机。就我而言，默认 Chrome 版本 (56.x) 运行良好，最新版本 (60.0.3112.116) 破坏了我的 WebView。

问题的实际原因是我在 Android 清单中的旧设置，即 android:anyDensity="false":

<supports-screens android:anyDensity="false" android:largeScreens="true"
                android:normalScreens="true" android:smallScreens="true"/>

anyDensity 设置告诉 Android 应用是否支持任何密度屏幕。很久以前我将它设置为 false，因为这具有自动缩放我的应用程序以适应各种屏幕尺寸的效果。这不是一个好方法，但它在很长一段时间内都运作良好。然而，最近的 Chrome 版本不再能很好地处理这个问题，导致 WebView 显示被放大和错误的大小，并且对视口设置等没有响应。它还导致了一些其他奇怪的非 WebView 行为，比如 View opacity 不起作用。

删除 anyDensity 设置或将其设置为 true（这是默认设置）解决了该问题。 Android 建议始终将此设置为 true，除非有充分的理由将其设置为 false，例如位图处理。这应该以编程方式完成，而不是在清单中全局完成。 https://developer.android.com/guide/topics/manifest/supports-screens-element.html

【讨论】：