媒体查询以定位窄桌面而非移动

Question

我们说我有以下代码：

@media (max-width: 1024px) {
   div {
      color: green;
   }
}

有没有办法在媒体查询中添加条件以排除移动设备？

...或者我是否必须在包含移动css代码的媒体查询中明确覆盖它？

移动代码中的特异性不是我所追求的，因为我在移动代码中根本无法设置我在桌面代码中设置的属性。

我也意识到，通过移动第一种方法，这个问题甚至不会出现。 （但这种方法在我的案例中没有使用）

通过覆盖移动规则中的桌面css规则，这是唯一的方法吗？

修改：所以看起来你只能用CSS做到这一点......就是这样，什么是一个好的JavaScript解决方案？

Answer 1

我刚才意识到我无论如何都在使用Modernizr。所以我认为对我来说最好的解决方案是使用Modernizr来检测触摸设备。像这样：

1）首先检查触摸事件

2）单击生成按钮

为了证明这一点，我将生成的javascript复制到jsbin

现在右键单击并检查html元素。 Modernizr增加了“无触摸”课程。在桌面和课堂上触摸＆＃39;用于手机和平板电脑（触摸设备）

现在我可以使用这样的代码：

@media (max-width: 1024px) {
   .no-touch {
      div {
         color: green;
      }
   }
}

Answer 2

你可以看看这个。这个问题表明了像你一样的类似问题。它可能有所帮助。检查评论和答案。 Media query to differentiate desktop from iPad in landscape mode。另请查看此文章以查看媒体查询http://css-tricks.com/snippets/css/media-queries-for-standard-devices/。您可以一起使用min-width和max-width。但iPad的横向模式将会出现。

Answer 3

我开始使用关键字Not - 在媒体查询中使用@media query not handheld and (max-width)...来反转逻辑，但iPhone，诺基亚等并不认为自己是掌上电脑，因此解决方案无效。

最后我提出了这个解决方案。

使用

@media only screen and (orientation : portrait){ 
/* codes here to target mobile/tablet devices, as they are held in portrait mode, 
   unless user changes to landscape mode */
}

@media only screen and (orientation : landscape) and (max-width: 1024px){ 
/* codes here to target desktops/laptops devices, as they are in landscape mode, 
   unless user changes to portrait mode which rarely someone does by a multiple key combinations */
}

注意：

如果出现以下情况，此解决方案将失败：

• 您的网站/应用可以在移动设备上用于横向和纵向模式，用户可以通过旋转移动设备/平板电脑来更改方向。

（请记住，您始终只能将用户限制为纵向模式）

• 如果台式机/笔记本电脑上的用户改变了屏幕方向

（很少有人没有任何必要的要求。）

Answer 4

@Gaurav，请查看此链接。非常有用的信息。

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://foundation.zurb.com/docs/media-queries.html

除此之外，如果你只使用宽度而不是设备宽度，那么它将只针对桌面浏览器。