Question

我目前正尝试创建适当的@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; }
  }
}

这实际上适用于我所拥有的大多数设备。但我在这里有一台iPad 2，并在Safari上试用了该网站，发生了以下情况：

在纵向模式下一切都很好。它将由“平板电脑”组处理。在横向模式下（当它具有1024px的宽度可以使用时），它仍将属于平板电脑组。但它不应该因为我的布局在比980px更宽的屏幕上完美运行。

正如我发现iOS设备总是报告他们的屏幕尺寸，因为他们处于纵向模式（实际上是一个愚蠢的想法），在我的情况下是768x1024。通过上面的媒体查询，当它处于风景中时，它将永远不会出现在非平板电脑部分。

有没有办法在平板模式下从平板电脑查询中排除ipad 2而不会干扰其他设备（例如行为正确的机器人）？

否则我必须使用我们想要避免的严格媒体查询单独定位每个设备。

Answer 1

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

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

@media查询在SASS中排除iOS设备

1 个答案: