针对窄桌面而非移动设备的媒体查询

Posted 2023-03-12

【中文标题】针对窄桌面而非移动设备的媒体查询

【英文标题】：media query to target narrow desktop and not mobile

【发布时间】：2014-06-09 10:01:30

【问题描述】：

假设我有以下代码：

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

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

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

增加移动代码的特异性不是我所追求的，因为我在桌面代码中设置的属性可能根本没有在移动代码中设置。

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

那么通过在移动规则中覆盖桌面 css 规则来做到这一点的唯一方法是什么？

编辑：看来你不能只用 CSS 来做到这一点……既然如此，什么是好的 javascript 解决方案？

【问题讨论】：

这仍将针对某些移动设备，例如 ipad

我认为您无法使用媒体查询来做到这一点，因为唯一可以识别的类型是 found here。有一个 js 解决方案 - navigator.userAgent.toLowerCase().match(/(android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini)/); 然后你可以包含样式表，如果它是错误的

【参考方案1】：

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

1) 首先检查触摸事件

2) 点击生成按钮

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

现在右键单击并检查 html 元素。 Modernizr 在桌面上添加了“无触摸”类，并为手机和平板电脑（触摸设备）添加了“触摸”类

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

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

【参考方案2】：

你可以看看这个。这个问题说明了像你一样的类似问题。它可能会有所帮助。检查 cmets 并回答。 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 的横向模式将进入它。

【参考方案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 */

注意：

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

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

（请记住，您始终可以仅将用户限制为纵向模式）

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

（很少有人在没有任何必要要求的情况下这样做。）

【参考方案4】：

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

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

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

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