android - WebKit 浏览器的 CSS 条件

Question

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

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

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

Answer 1

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

http://www.quirksmode.org/js/detect.html

Answer 2

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

.myDiv { width: 280px; }

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

Answer 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 测试页面上对其进行测试：

http://browserstrangeness.bitbucket.io/css_hacks.html#webkit或 http://browserstrangeness.github.io/css_hacks.html#webkit

这样做的原因是 iOS 不支持 :-webkit-full-screen CSS 伪类，否则它会包含在 webkit 发行版中。

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

享受！