CSS3媒体查询

Question

这两条指令有什么区别？

@media screen and (max-device-width: 480px) {} 

和

@media only screen and (max-device-width: 480px) {} 

Answer 1

关键字"仅"也可用于隐藏旧用户代理的样式表.用户代理必须处理以"仅"开头的媒体查询,就好像"仅"关键字不存在一样.

来自http://www.w3.org/TR/css3-mediaqueries/

在实际使用场景中,only screen查询用于定位支持现代CSS的特定移动浏览器.

来自http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

更清楚

使用"only"关键字对媒体查询进行前缀将导致非CSS3兼容的浏览器忽略该规则.

来自http://www.html5rocks.com/en/mobile/mobifying.html