-webkit-filter 在 Android cordova 应用程序中无法正常工作答案

【问题标题】：-webkit-filter won't properly work in an Android cordova app-webkit-filter 在 Android cordova 应用程序中无法正常工作
【发布时间】：2016-02-23 10:40:32
【问题描述】：

有趣的事情。想象一下，你有一个 div 和一个名为 night-mode 的类，并且这个 css 到处漫游：

.night-mode.night-mode-enabled {
  -webkit-filter: invert(1) hue-rotate(180deg) saturate(80%);
}

点击一个按钮，您可以在应用程序中打开这个非常便宜的夜间模式，但会将课程 night-mode-enabled 切换到重要的 divs。

准备、编译、在 iOS 中运行，它按预期工作。 div 中的所有内容都处于较暗的模式，保持相同的颜色，但稍微不饱和。

虽然在 Android 中运行...除了额外慢（我不认为 Note 3 是一款特别慢的手机），它并没有对那个 div 做任何事情.然后，我开始使用其他规则组合，比如这些花哨的组合：

.night-mode.night-mode-enabled, 
.night-mode.night-mode-enabled>div *, 
.night-mode.night-mode-enabled * {
  -webkit-filter: invert(1) hue-rotate(180deg) saturate(80%);
}

这让工作几乎完成了。几乎我的意思是，它能够反转所有内容，但在某些情况下不适用的项目（我的赌注是“在.night-mode.night-mode-enabled”之前的均匀数量的优势）。。

这可能与我的 Cordova for Android 相当旧 (3.7.1) 而 iOS 稍微新一点 (3.8.0) 有关吗？

注意：在有人告诉我因为新的 Play 商店要求我需要升级 cordova 之前，我必须承认这是我下个月的准备工作，但这样做太耗时了以下版本，所以如果过滤器可以通过cordova升级修复，很好，但如果可以避免，它会好得多。

【问题讨论】：

一个原因可能是您的设备使用的 webkit 版本。版本取决于 android 版本和设备的生产商。过去我在使用三星设备时遇到过类似的问题，他们使用了另一个版本而不是相应的 android 版本。
@Joerg 这会澄清很多。尽管电话是棒棒糖，是的，这可能就是问题所在。我用联想试试看，稍后告诉你
可悲的是，同样的结果，@Joerg。这可能是一个巨大的巧合，但尽管联想处于 过滤器约束（使用前缀，+4.4）似乎也不能正常工作。

标签： android ios css cordova

【解决方案1】：

我没有针对您的过滤器问题的解决方案，但是当我遇到类似问题时，我在正文中注入了一些具有 CSS 选择器的类。我使用了设备插件并创建了这段代码来获取 Android 4.4（只需根据您的需要进行更改）：

function onDeviceReady() {
   if (device.platform === "Android") {
      var tmp = device.version.split(".");
      if (parseFloat(tmp[0] + "." + tmp[1]) === 4.4){
         $("body").addClass("API18");
      }
   }
}

如果您需要更深入的设备模型检测，只需从插件中注入设备模型即可。

如果您需要按名称检测 iOS 型号，可以使用此列表：https://www.theiphonewiki.com/wiki/Models 对于 Android，您可以在此处找到一些型号 http://download.cyanogenmod.org

【讨论】：