CSS @media 查询未检测到 Droid 2答案

【问题标题】：Droid 2 not detected by CSS @media queryCSS @media 查询未检测到 Droid 2
【发布时间】：2011-10-10 19:56:23
【问题描述】：

我正在使用以下 CSS @media 查询来为我的页面设置样式，以适应 iPhone 和 Android 等移动浏览器：

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

但是，我的一位用户说它没有检测到他的 Droid 2 手机。他的用户代理字符串是：

Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.12011-07-18 05:34:59

这是怎么回事？

【问题讨论】：

标签： android css browser mobile media-queries

【解决方案1】：

如果您使用max-device-width: 854px，它将始终包含480px。
关键词：最大

【讨论】：

【解决方案2】：

Droid 2 的屏幕显然是 854x480，所以试试 (max-device-width: 854px)。

参考：http://arstechnica.com/gadgets/reviews/2010/08/hands-on-motorolas-droid-sequel-is-a-worthy-update.ars

【讨论】：

Droid、DroidX 等也是如此……480 将处于纵向模式，854 将处于横向模式。无论如何，即使它们不是，它们也将是 800 像素宽/高
谢谢。有什么办法可以(max-device-width: 480px) or (max-device-width: 854px)？
来自developer.mozilla.org/en/CSS/Media_queries：“您可以将多个媒体查询组合在一个逗号分隔的列表中；如果列表中的任何媒体查询为真，则应用关联的样式表。这是等价的逻辑“或”运算。”所以听起来你想要@media only screen and (max-device-width: 480px), (max-device-width: 854px)
应该是@media only screen and (max-device-width: 480px), only screen and (max-device-width: 854px)，即重复only screen部分