@在SASS中排除iOS设备的媒体查询

我目前正在尝试创建适当的@media查询，以针对3个不同的设备组：手机、平板电脑和台式机

我在SASS中使用以下mixin来完成它：

@mixin respond-to($media) {
  @if $media == phones {
    @media only screen and (max-width: 320px) { @content; }
  }
  @else if $media == tablets {
    @media only screen and (min-width: 321px) and (max-width: 979px) { @content; }
  }
  @else if $media == desktops {
    @media only screen and (min-width: 980px) { @content; }
  }
}

这实际上对我周围的大多数设备都很有效。 但我这里有一台iPad2，并尝试了Safari的网站，结果如下：

在纵向模式下，一切正常。它将由“平板电脑”集团按原样处理。 在横向模式下（当它有1024倍的宽度时），它仍然属于平板电脑组。但这不应该，因为我的布局在大于980px的屏幕上工作得很好

正如我发现的那样，iOS设备总是报告它们的屏幕大小，因为它们处于纵向模式（实际上是一个愚蠢的想法），在我的例子中是768x1024。通过上面的媒体查询，当它处于横向时，它将永远不会在非平板电脑部分结束

有没有一种方法可以在不干扰其他设备（比如行为正常的机器人）的情况下，将横向模式的iPad2从平板电脑查询中排除

---

否则，我必须使用自己的严格媒体查询分别针对每个设备，我想避免这种情况。

我打赌问题是由于您的视口元标记造成的。以下是我在所有响应站点上使用的内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

像这样的特定断点将是一场艰苦的战斗。你有没有想过让你的内容来决定断点？我最近回答了一个关于这个的问题，也看看Brad Frost的这篇新文章，特别是第一节，断点来自内容。我必须应用980以下的中等屏幕规则，甚至320以下的不同规则。正如我所写：在大多数设备上都可以正常工作。只有ipad让我抓狂，当它的实际屏幕显示>980，但仍然使用