CSS条件判断的WebKit浏览器

Question

我想申请一个CSS样式一个div，但我不知道如何识别Chrome的桌面和Android导航

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

有没有一种方法来检测来自CSS铬或Android导航仪？

Answer 1

不检查的Android（你不能在CSS） - 检查使用Media Queries屏幕尺寸。这比检查特定的浏览器要好得多，并且在用于使设计在一定范围内工作时被称为响应式设计。

.myDiv { width: 280px; } 

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

Answer 2

我可能是错的，但我认为唯一的是嗅探浏览器代理，然后添加一个类到身体。

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

Answer 3

尽管在旧的机器人会一个CSS特定的黑客，我发现了一种方法，将排除的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黑客测试页：

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

原因这个作品是iOS不支持： - webkit全屏CSS伪类，否则它包含在webkit发行版中。

在此张贴时间，Safari是在8版本，而Chrome是在开发/金丝雀版本多达41

享受！