Android WebView 在某些设备上异常大的缩放级别和字体大小
Android WebView abnormal large zoom level and font sizes on some devices
我有一个较旧的 Android Titanium 应用程序,它使用 Titanium SDK 5.5.1(我不能使用 SDK 6+,因为代码使用 Ti.include)。该应用程序使用 WebView 显示本地 CSS 样式的 html 内容。最近,一些 Android 设备 运行 Android 6+ 突然开始使用巨大的字体显示 WebView 内容,这些字体只需几个单词即可填满屏幕。这发生在某些设备上而不是其他设备上,我无法在我用于测试的设备(Samsung Galaxy S7 运行 Android 7.0)或任何模拟器(Genymotion 或 built-in Android SDK).
能想到的我都试过了。我使用各种选项设置元视口 - 目前如下,根据 Android 建议:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
我尝试将 width=device-width 添加到内容中,但这并没有什么不同,显然它是推断出来的,在使用 initial-scale=1.0.
时没有必要
我还在包装器 font-size CSS 属性 和包装器 div 中将 font-size CSS 属性 硬编码为页面样式 header 中的一组像素大小] class,还是没有运气。
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 WebViews 使用 Chrome 渲染代理,从 v. 5.0 (Lollipop) 开始,它已被移至 Chrome APK,因此它可以独立于OS。最近某个时候 Chrome 的新版本导致我的 WebView 停止工作。您可以在此处了解更多相关信息:
https://developer.chrome.com/multidevice/webview/overview
我通过在测试 phone 中停用 Chrome 发现了这一点。这具有将 Chrome 恢复为 Chrome 的设备出厂安装版本的效果,根据 phone,它可能比最新版本旧得多。就我而言,默认 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不透明度不起作用。
删除 anyDensity 设置或将其设置为 true(默认设置)解决了问题。 Android 建议始终将其设置为 true,除非有充分的理由将其设置为 false,例如位图处理。这应该以编程方式完成,而不是在清单中全局完成。
https://developer.android.com/guide/topics/manifest/supports-screens-element.html
我有一个较旧的 Android Titanium 应用程序,它使用 Titanium SDK 5.5.1(我不能使用 SDK 6+,因为代码使用 Ti.include)。该应用程序使用 WebView 显示本地 CSS 样式的 html 内容。最近,一些 Android 设备 运行 Android 6+ 突然开始使用巨大的字体显示 WebView 内容,这些字体只需几个单词即可填满屏幕。这发生在某些设备上而不是其他设备上,我无法在我用于测试的设备(Samsung Galaxy S7 运行 Android 7.0)或任何模拟器(Genymotion 或 built-in Android SDK).
能想到的我都试过了。我使用各种选项设置元视口 - 目前如下,根据 Android 建议:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
我尝试将 width=device-width 添加到内容中,但这并没有什么不同,显然它是推断出来的,在使用 initial-scale=1.0.
时没有必要我还在包装器 font-size CSS 属性 和包装器 div 中将 font-size CSS 属性 硬编码为页面样式 header 中的一组像素大小] class,还是没有运气。
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 WebViews 使用 Chrome 渲染代理,从 v. 5.0 (Lollipop) 开始,它已被移至 Chrome APK,因此它可以独立于OS。最近某个时候 Chrome 的新版本导致我的 WebView 停止工作。您可以在此处了解更多相关信息: https://developer.chrome.com/multidevice/webview/overview
我通过在测试 phone 中停用 Chrome 发现了这一点。这具有将 Chrome 恢复为 Chrome 的设备出厂安装版本的效果,根据 phone,它可能比最新版本旧得多。就我而言,默认 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不透明度不起作用。
删除 anyDensity 设置或将其设置为 true(默认设置)解决了问题。 Android 建议始终将其设置为 true,除非有充分的理由将其设置为 false,例如位图处理。这应该以编程方式完成,而不是在清单中全局完成。 https://developer.android.com/guide/topics/manifest/supports-screens-element.html