媒体查询以定位平板电脑

Question

我正在为响应式网站创建网站标题/菜单。我使用960px及以上的断点用于具有悬停状态和下拉菜单的桌面菜单，以及用于移动菜单显示的959px及以下的断点。这适用于大多数用例，但我也希望移动菜单以横向模式显示在平板电脑上，通常比960断点更宽。我试图仅使用CSS媒体查询来定位这些平板电脑，而不是JavaScript。

我原本以为使用像素比率，如下所示：

@media (max-width:959px), (-webkit-min-device-pixel-ratio:1.5) {
  /*mobile styles here*/
}
@media (min-width:960px) and (-webkit-max-device-pixel-ratio:1.499) {
  /*desktop styles here*/
}

这首先起作用，但随后我意识到台式机上更高分辨率的Retina显示器正在获得移动菜单。不幸的是，我需要支持旧版本的iOS（低至7），所以我不能依赖Media Queries Level 4并使用交互查询。

任何人都可以使用可以帮助我的媒体查询集吗？我需要能够设置适用于小于960的宽度和大于960的平板电脑的样式，并设置适用于非平板电脑960以上宽度的样式。

谢谢！