媒体查询：如何不针对 Ipad答案

【问题标题】：Media queries: How to NOT target Ipad媒体查询：如何不针对 Ipad
【发布时间】：2013-01-13 23:06:52
【问题描述】：

我知道有很多关于媒体查询的话题，但今晚我陷入了困境：

我的目标是许多智能手机，特别是三星 Galaxy S3：

@media screen and (max-device-width: 720px), (min-device-width: 721px) { .. }

它适用于肖像和风景！但是不知道为什么，这样我也瞄准了Ipad横屏模式，我不想这样！如果我更喜欢将 Ipad 的纵向视图与智能手机一起定位！需要明确的是，我想要实现的是有 2 个版本的网站，默认是最大宽度 960px 的布局和一个较小的版本，非常适合智能手机，也适合 Ipad 和其他平板电脑纵向。现在移动版可在智能手机上运行，但在 Ipad 上几乎没有......

我知道我可以直接针对 Ipad，但我不想复制许多与桌面相同的 css 规则！

【问题讨论】：

您不应该使用媒体查询来检测硬件供应商。
您可能希望将标题更改为“如何不针对 iPad”。当前标题似乎意味着您要求的是不推荐的技术。
我猜你是对的，大卫。 @Jongsma 我会，但我不能改变它！无论如何，我改变了方法，我将服务器端检测 mobile_detect.php 与媒体查询结合使用。我正在测试哪个是它的最佳用途，如果同一页面上超过 3 个 PHP 查询太多而无法排除内容块：if($detect->isMobile())
已为您更改。来自一个不相关的谷歌搜索，我认为这可能是一篇有趣的代码相关文章的标题。结果不是。 #edit 哦，哇，这太旧了。

标签： css media-queries landscape-portrait

【解决方案1】：

问题似乎出在媒体查询的语法上。您使用了逗号而不是 and，我认为您的 max/min 是错误的。对于 CSS 媒体查询，, 是 OR 分隔符，而 AND 需要多个查询才能为真。

您的媒体查询应如下所示：

@media screen and (min-device-width: 720px) and (max-device-width: 721px) { .. }

或者写得更简洁，你可以使用特定的device-width：

@media screen and (device-width: 720px) { .. }

使用此方法，您可以使用逗号定位 Galaxy S3 纵向和横向，即：

@media screen and (device-width: 720px), (device-width: 1280px) { .. }

【讨论】：