Question

iPad Pro的宽度超过桌面宽度 - 1366px。现在有很多小型笔记本电脑与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 的桌面媒体查询，包括1024px及更大版本的所有桌面。这可能吗？它会是什么？

Answer 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加载它。我知道，这是 noture 。

如何制作媒体查询，一个包含iPad专业版和一个将其排除在桌面版之外？

1 个答案: