Safari：媒体查询未按预期宽度触发

Posted 2023-03-06

【中文标题】Safari：媒体查询未按预期宽度触发

【英文标题】：Safari: Media query not firing at the expected width

【发布时间】：2017-10-18 00:41:03

【问题描述】：

我写了一个 CSS 媒体查询 像这样 -

@media screen and (max-width: 59.9375em) 
  .left 
   display: none;
  

这适用于除 Safari 10.0.4 及更低版本之外的所有浏览器。 Safari 似乎以不同的方式处理媒体查询。

其他浏览器似乎将 window.innerWidth 作为视口宽度来触发媒体查询，但 safari 似乎将 document.documentElement.clientWidth 作为视口宽度并相应地触发媒体查询。

我可以看到实际断点和预期断点之间有 15 像素的差异。 我正在寻找一种跨浏览器的方式来处理这个问题。 欢迎提出想法，在此先感谢。

【问题讨论】：

Safari 在关闭 中非常完善，检查它们是否都已关闭并且 css 代码中没有错误。

【参考方案1】：

使用 px（像素）而不是 em。 em 不是固定的，而是相对的。不同浏览器解析不同。

@media screen and (max-width: 59.9375px) 
  .left 
   display: none;
  

【讨论】：

您的想法是对的，但您需要更改数量 (59.9375) 以及测量单位，因为 59.9375px 是 tiny .目前没有像 59px 这样小的移动屏幕，因此这个媒体查询永远不会触发。

那只是一个演示。根据您的要求进行更改。我怎么知道用户的屏幕宽度。 （不要忘记将答案标记为有用）@Frits

【参考方案2】：

试试这个css hack：

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)  
@media 
  .left  
      display: none;
  

来源：https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/

【讨论】：

这很有趣 - 你能解释一下这个 hack 是如何达到预期结果的吗？

我不知道这到底是如何工作的，我更新了我的帖子以准确地告诉你我的来源。这个对我有用，你呢？

【参考方案3】：

窗口宽度 vs 实际宽度其实是一个超级有趣的话题。 Snuggug has a really extensive explanation for it，但简而言之，它是基于滚动条在不同浏览器中的放置方式。

某些浏览器会将滚动条覆盖在内容/网站的顶部。其他浏览器会缩短内容/网站的宽度，并在其旁边有滚动条next。这显然会在不同浏览器计算视口宽度的方式上产生一些差异。

一个潜在的问题是您使用em 作为度量单位。

请务必记住，em 是基于您当前字体大小的度量单位，因此对浏览器的解释是开放的。

根据您的font-family 和整体font-size，60em 通常在 800 像素左右。这意味着您的查询会更具体，如下所示：

@media screen and (max-width: 800px) 
  .left 
     display: none;
  

如果您不确定样式是否被覆盖，您始终可以应用如下重要规则：

@media screen and (max-width: 800px) 
  .left 
     display: none !important;
  

如果您希望不在您的 CSS 中使用 !important 标记，那么您需要确保注意下面列出的两种情况：

---

CSS 从上到下读取

这意味着如果您为 .left 元素指定了规则，则需要将其放置在之前您的媒体查询而不是之后

错误的布局如下所示：

@media screen and (max-width: 800px)  //media query BEFORE rule
  .left 
     display: none;
  


.left 
   .display:block;

正确的布局如下所示：

.left 
   .display:block;


@media screen and (max-width: 800px)  //media query AFTER rule
  .left 
     display: none;
  

接下来要记住的是：

---

嵌套的 CSS 选择器优先

在您的媒体查询规则中使用相同数量（或更多）的父选择器。

错误的选择器系列：

.container .left  //2 selectors used in query
   .display:block;


@media screen and (max-width: 800px) 
  .left  //only 1 selector used in query therefore overwritten by the previous rule - this should have atleast 2 selectors to overwrite the previous rule
     display: none;
  

CORRECT 系列选择器：

.container .left  //2 selectors used in query
   .display:block;


@media screen and (max-width: 800px) 
  body .container .left  //3 selectors used in query
     display: none;
  

【讨论】：

还有一个非常有趣的SO answer by ausi 对 similar 问题，它使阅读变得有趣和半相关:)

【参考方案4】：

您必须根据 css 规则在 .left 类之后使用媒体查询

例如

.left 
  display:inline;


@media screen and (max-width: 59.9375em) 
  .left 
   display: none !important; //important will override all the .left class.
  

【讨论】：

绝对没有理由在这里使用!important。为什么要这么做？尤其是稍后，您可能想再次使用该类，然后您必须再次使用!important。在大多数情况下，像这样提高特异性是个坏主意。

【参考方案5】：

你应该阅读这两篇文章：

https://zellwk.com/blog/media-query-units/ https://adamwathan.me/dont-use-em-for-media-queries/

然后你就会明白为什么你会遇到你所询问的问题。

TLDR：em 值基于根字体大小值，但在 Safari 与其他浏览器的情况下，em 相对于初始值或根值（浏览器为媒体查询选择一个或另一个，但不能两者兼有，这可能会导致跨浏览器的差异）