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

Posted 2023-03-12

【中文标题】@media 查询以在 SASS 中排除 iOS 设备

【英文标题】：@media queries to exclude iOS device in SASS

【发布时间】：2013-09-18 20:46:24

【问题描述】：

我目前正在尝试创建适当的@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 而不会干扰其他设备（例如行为正常的机器人）？

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

【问题讨论】：

你真的要与这样的特定断点进行一场艰苦的战斗。你有没有想过让你的内容决定断点？我最近回答了一个关于这个的问题 ***.com/questions/14352108/… ，还可以查看 Brad Frost 的这篇新帖子，特别是第一部分 bradfrostweb.com/blog/post/…

断点来自内容。我必须应用低于 980 的中型屏幕规则，甚至应用低于 320 的不同规则。正如我所写：在大多数设备上都可以正常工作。只有 ipad 在实际可以显示 >980 但仍使用

【参考方案1】：

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

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