Question

我在我们的应用程序中遇到了奇怪的行为，这是在Android上运行的Phonegap包装的WebView。我不确定我是否正在查看错误或可能有其他原因，因此这个问题。

自2013年以来，Chromium大致上background CSS属性还可以包含background-size的简写定义，由/分隔。

例如：background: green url(../img/hk.svg) center center / 100% auto

这种语法在Android的Chrome浏览器中运行得非常好，在UA Chrome/51.0.2704.81上进行了测试。从KitKat开始，系统中的Chromium核心也用于WebView而不是库存浏览器，因此我们的Phonegap应用程序使用与Chrome应用程序完全相同的渲染核心（Chrome/51.0.2704.81）。

但是，background-size简写在WebView变体中不起作用。在开发工具中，语法显示正确，但行为就好像background-size字符串中的background定义不存在一样。如果之后明确设置了background-size，问题就解决了。

下面，我提供了一个小的包含.apk，您可以通过在Chrome中通过设备检查进行调试来测试此行为。

完整的UA Chrome字符串：Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MOB30D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.81 Mobile Safari/537.36

完整的UA Chrome WV字符串：Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MOB30D; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.36

Test case for Chrome browser - codepen
Test case APK for Android - 最小的Phonegap Hello World包装器，没有请求的权限

APK使用以下相关的HTML / CSS：

<div class="block"></div>
<div class="block extended"></div>

.block { background: green url(../img/hk.svg) center center / 100% auto; }
.extended { background-size: 100% auto; }

正如您将观察到的那样，只有.extended类的div才会正确呈现，而两者都应该正确呈现。

谢谢！

Answer 1

我展开了您发布的APK文件，并将您的源代码复制到我新创建的cordova项目中。我构建了我的项目并在Android Marshmallow上运行的设备中进行了测试。它工作正常。请找到结果的screenshot。

还在我的github page中添加了示例项目。请求您查看它并从中生成APK，因为这可能是您的项目设置的问题。我使用的是cordova版本6.2.0和Cordova Android版本5.1.1

另外我遇到了其他link，其中指出你必须在使用背景大小的简写之前指定位置（0％）。您可以在设置中尝试一次该选项。希望它有所帮助

Answer 2

正如报道的here，安卓webview的background-size简写在版本 4.4 （ api level 19 ）下无效。

但我认为kitkat还有一些问题（看看这个问题：background-sizecover-not-working-in-android-native-browser）。

Chromium 51和Chromium 51 WebView之间的背景大小缩写行为不一致

2 个答案: