某些设备上的Android WebView异常大缩放级别和字体大小

时间:2017-09-13 17:36:23

标签: android webview titanium appcelerator

我有一个较旧的Android Titanium应用程序使用Titanium SDK 5.5.1(我不能使用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时没有必要。

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

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,
});

该应用程序有许多活跃的用户,他们正因此而抱怨。由于我无法在开发环境中复制问题,因此我在黑暗中工作。一些正在经历这种情况的用户正在帮助我测试修复程序,但调试非常困难。任何见解都会非常感激。

1 个答案:

答案 0 :(得分:1)

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

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

我通过在测试手机上停用Chrome来发现这一点。这样可以将Chrome还原到Chrome的设备工厂安装版本,这可能比最近的Chrome版本要大,具体取决于手机。就我而言,默认的Chrome版本(56.x)运行良好,最新版本(60.0.3112.116)破坏了我的WebView。

问题的实际原因是我在Android清单中设置的旧设置,即android:anyDensity =&#34; false&#34;:

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

anyDensity设置告诉Android该应用是否支持任何密度屏幕。我很久以前就把它设置为假,因为它具有自动缩放我的应用程序的各种屏幕尺寸的效果。这不是一个好方法,但它长期以来运作良好。但是,最近的Chrome版本不再处理这个问题导致WebView显示大幅放大和错误大小,并且对视口设置等没有响应。它还导致其他一些奇怪的非WebView行为,例如View opacity无法正常工作。

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