CSS条件判断的WebKit浏览器
问题描述:
我想申请一个CSS样式一个div,但我不知道如何识别Chrome的桌面和Android导航CSS条件判断的WebKit浏览器
.myDIV{
[if CHROME???] width: 280px;
[if ANDROID???] width: 100%;
}
有没有一种方法来检测来自CSS铬或Android导航仪?
答
不检查的Android(你不能在CSS) - 检查使用Media Queries屏幕尺寸。这比检查特定的浏览器要好得多,并且在用于使设计在一定范围内工作时被称为响应式设计。
.myDiv { width: 280px; }
@media screen and (max-width: 699px) {
.myDiv { width: 100%; }
}
答
尽管在旧的机器人会一个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
享受!