我在我们的应用程序中遇到了奇怪的行为,这是一个在 Android 上运行的 Phonegap 包装的 WebView。我不确定我是在查看错误还是可能有其他原因,因此提出了这个问题。
大约从 2013 年开始,对于 Chromium,background
CSS 属性也可以包含 background-size
的简写定义,由 /
分隔。
例如:背景:绿色 url(../img/hk.svg) center center/100% auto
在 UA Chrome/51.0.2704.81
上测试过,此语法在适用于 Android 的 Chrome 浏览器中显然运行良好。由于 KitKat,系统中存在的 Chromium 核心也用于 WebView 而不是标准浏览器,因此我们的 Phonegap 应用程序使用与 Chrome 应用程序完全相同的呈现核心 (Chrome/51.0.2704.81
)。
但是,background-size
速记在 WebView 变体中不起作用。在开发工具中,语法显示为正确,但表现得好像 background
字符串中的 background-size
定义不存在。如果之后显式设置了 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 移动版 Safari/537.36
Test case for Chrome browser - 代码笔
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 才能正确呈现,而两者都应该。
谢谢!
最佳答案
我分解了您发布的 APK 文件并将您的源代码复制到我新创建的 cordova 元素中。我构建了我的元素并在运行 Android Marshmallow 的设备上进行了测试。它工作正常。请查找 screenshot结果也是如此。
还在我的github page中添加了示例元素.请您查看它并从中生成 APK,因为这可能是您的元素设置的问题。我正在使用 cordova 版本 6.2.0 和 Cordova Android 版本 5.1.1
我还遇到了其他 link其中规定在使用背景大小速记之前必须指定位置 (0%)。您可以在设置中尝试一次该选项。希望对你有帮助
关于android - Chromium 51 和 Chromium 51 WebView 之间不一致的背景大小速记行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38376169/