WebView：根据 Android API 版本不同的 css 解释

Posted 2023-05-07

【中文标题】WebView：根据 Android API 版本不同的 css 解释

【英文标题】：WebView: Different css interpretation depending on the Android API version

【发布时间】：2020-06-25 22:31:39

【问题描述】：

我在 android WebView 中使用那个简单的 CSS。

.rounded
  text-align: center;
  border-radius: 25px;
  border: 2px solid #FFFF014F;

在 API 28 设备上运行完全正常。但是对于 22 API 设备，我没有得到相同的结果（根本没有显示边框）。

这是我正在使用的两台设备（两台设备的分辨率相同）：

我想 css 属性的解释取决于 WebView 或 API 版本。 （我不确定）

我希望一个 css 文件在所有 Android 版本中都以相同的方式工作。所以：

有没有办法纠正这个问题？ 是否有文档可以找到我可以根据 API 版本使用的 css 属性？

【问题讨论】：

您是否检查过使用 API 22 的设备可以支持 8 位颜色表示？例如caniuse.com/#feat=css-rrggbbaa 阅读底部的注释，也请检查此bugs.chromium.org/p/chromium/issues/detail?id=618472 并选择@Kosh 答案，这很可能比 API 版本更安全。

【参考方案1】：

使用rgba() 颜色符号。 它的支持比 HEX rgba 更好。

让我们转换#FFFF014F：

红色：FF = 255 绿色：FF = 255 蓝色：01 = 1 阿尔法：4F = 79/255 = .31

所以结果是border: 2px solid rgba(255, 255, 1, .31);

body background:navy

span 
  display:inline-block;
  padding:.5em;
  margin:1em;
  text-align: center;
  border-radius: 25px;
  color:#fff;


.hex border: 2px solid #FFFF014F
.rgba border: 2px solid rgba(255, 255, 1, .31)

<span class="hex">#FFFF014F</span>
<span class="rgba">rgba(255, 255, 1, .31)</span>