0

我目前正在尝试创建适当的@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 宽度时）它仍然会落入平板电脑组。但它不应该因为我的布局在 980 像素以上的屏幕上完美运行。

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

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

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

4

1 回答 1

0

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

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-09-19T20:58:28.610 回答