如何进行媒体查询，一个包括 iPad pro，一个不包括桌面？答案

【问题标题】：How make media queries, one that includes the iPad pro and one that excludes it for desktop?如何进行媒体查询，一个包括 iPad pro，一个不包括桌面？
【发布时间】：2017-09-29 08:29:56
【问题描述】：

iPad Pro 的宽度与桌面宽度相交 - 1366 像素。现在有很多较小的笔记本电脑适合与 iPad Pro 相同的宽度（11 英寸和 13 英寸笔记本电脑）。

在 iPad Pro 上，我想显示汉堡菜单之类的东西，但在桌面上，我想用鼠标悬停导航。

在 iPad Pro 之前，我可以将分界线设为 1024 像素宽，但现在有交叉。

我需要一个包含它的媒体查询（因此它显示移动横向视图）和一个排除它的媒体查询（因此桌面仅在没有 ipad Pro 时显示）。

我认为这个包含它正确：

<!-- Put on multiple lines for readability -->
<link rel="stylesheet" media="only screen 
     and (min-device-width: 1024px) 
     and (max-device-width: 1366px) 
     and (orientation: landscape) 
     and (-webkit-min-device-pixel-ratio: 1.5)"                
     href="/css/desktop.css" />

但我不知道如何进行桌面媒体查询，该查询将排除 iPad Pro并包括 1024 像素及以上的所有桌面。这可能吗？会是什么？

【问题讨论】：

为什么不让您的导航同时使用鼠标悬停和点击/点击？
@ceejayoz 我不希望汉堡包在小型桌面上显示，我确实希望它显示在 iPad Pro 上。

标签： html css ipad media-queries

【解决方案1】：

这是一个很好的尝试，但您无法确定是否不在这些设备上进行测试。我认为最可靠的方法是使用像https://stackoverflow.com/a/4617648/1729641上的脚本

例如，您可以使用 JavaScript 向 body 添加一个类：

document.body.className += (navigator.userAgent.match(/iPad/i) != null) ? ' ipad' : '';

如果你使用 JQuery：

if (navigator.userAgent.match(/iPad/i) != null) {
    $(body).addClass('ipad');
}

如果您的目标是避免在其他设备上下载此样式，则可以使用 AJAX 加载它。这是不纯的，我知道。

【讨论】：