WebKit 浏览器的 CSS 条件答案

【问题标题】：CSS Conditionals for WebKit BrowsersWebKit 浏览器的 CSS 条件
【发布时间】：2013-03-04 17:26:26
【问题描述】：

我想为 div 应用 CSS 样式，但我不知道如何识别 Chrome for Desktop 和 Android Navigator

.myDIV{
[if CHROME???] width: 280px; 
[if ANDROID???] width: 100%; 
}

有没有办法从 CSS 中检测 chrome 或 android navigator？

【问题讨论】：

【解决方案1】：

我可能是错的，但我认为唯一的方法是嗅探浏览器代理，然后向正文添加一个类。

【讨论】：

【解决方案2】：

不要检查 Android（你不能在 CSS 中） - 使用 Media Queries 检查屏幕大小。这比检查特定命名的浏览器要好得多，并且在用于使设计在各种尺寸下工作时称为响应式设计。

.myDiv { width: 280px; }

@media screen and (max-width: 699px) {
  .myDiv { width: 100%; }
}

【讨论】：

【解决方案3】：

虽然没有针对旧 Android 的 CSS 特定 hack，但我找到了一种排除 iPad/iPhone（任何 iOS 设备）的方法。这不适用于较旧的非“超高清”设备，但现在几乎适用于任何现代设备。

你如何使用它：

/* Modern Androids (For Android 4.0+, Chrome 15+, Safari 5.1+, and Opera 14+) */

_:-webkit-full-screen, :root .selector { color:blue; }

在我的实时 CSS hacks 测试页面上对其进行测试：

之所以可行，是因为 iOS 不支持 :-webkit-full-screen CSS 伪类，否则它会包含在 webkit 发行版中。

在本文发布时，Safari 的版本为 8，Chrome 的开发/Canary 版本最高为 41。

享受吧！

【讨论】：