正文 

当前位置： 首页 > 源码 >

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

     2023-03-06     143

关键词：

【中文标题】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 相对于初始值或根值（浏览器为媒体查询选择一个或另一个，但不能两者兼有，这可能会导致跨浏览器的差异）

【讨论】：

媒体查询以错误的宽度触发

】媒体查询以错误的宽度触发【英文标题】：MediaQueriesfiringatwrongwidth【发布时间】：2014-12-2901:08:23【问题描述】：我正在构建一个响应式页面，并且媒体查询以错误的宽度大小触发。我正在使用Chrome。@mediascreenand(max-width:1200px).lo... 查看详情

基于 Em 的 CSS 媒体查询在 Ios Mobile Safari 上显示比预期更小的分辨率

】基于Em的CSS媒体查询在IosMobileSafari上显示比预期更小的分辨率【英文标题】：Em-BasedCSSMediaQueryShowingSmallerResolutionThanExpectedOnIosMobileSafari【发布时间】：2013-11-0309:11:33【问题描述】：我正在使用基于em的CSS媒体查询处理newwebsite。... 查看详情

Windows Phone：警报类未按预期触发

】WindowsPhone：警报类未按预期触发【英文标题】：WindowsPhone:Alarmclassnotfiringasintended【发布时间】：2013-11-1417:24:13【问题描述】：您好，我正在为windowsmobile创建一个简单的闹钟，但我的闹钟类没有按预期触发。这是我的代码：publi... 查看详情

WPF 触发器未按预期工作

】WPF触发器未按预期工作【英文标题】：WPFTriggerNotWorkingAsIntended【发布时间】：2013-07-1911:53:38【问题描述】：我想要一个红色按钮，当鼠标悬停在它上面时会变黑。<ButtonContent="Hoverme"Grid.Column="3"Grid.Row="3"><Button.Style><St... 查看详情

宽度=“*”的网格列未按预期使用所有可用空间[重复]

】宽度=“*”的网格列未按预期使用所有可用空间[重复]【英文标题】：Gridcolumnwithwidth="*"doesnotuseallavailablespaceasexpected[duplicate]【发布时间】：2022-01-1317:10:05【问题描述】：我第一次使用ListView时遇到问题。我的自定义项目... 查看详情

e.PreventDefault（）未按预期触发，表单提交[重复]

】e.PreventDefault（）未按预期触发，表单提交[重复]【英文标题】：e.PreventDefault()notfiringasintended,formsubmission[duplicate]【发布时间】：2021-09-2621:27:29【问题描述】：就像标题所说的那样简单，为什么e.PreventDefault没有执行而所有警报... 查看详情

媒体查询最小宽度在 Opera、FF 和 IE 中未正确触发

】媒体查询最小宽度在Opera、FF和IE中未正确触发【英文标题】：MediaQueriesmin-widthnotfiringcorrectlyinOpera,FFandIE【发布时间】：2012-04-2106:28:42【问题描述】：我在页面http://test.lovecpokladu.cz/detail-mince?id=2461上使用媒体查询，如下所示：@me... 查看详情

setNeedsDisplay 未按预期在子视图中触发 drawRect

】setNeedsDisplay未按预期在子视图中触发drawRect【英文标题】：setNeedsDisplaydoesnottriggerdrawRectinsubviewsasexpected【发布时间】：2012-07-1401:41:53【问题描述】：我正在为setNeedsDisplay苦苦挣扎。我认为它应该为调用它的视图触发drawRect:的调... 查看详情

Firebase云功能Firestore触发onWrite在本地测试时未按预期运行

】Firebase云功能Firestore触发onWrite在本地测试时未按预期运行【英文标题】：FirebasecloudfunctionFirestoretriggeronWritenotbehavingasexpectedwhentestinglocally【发布时间】：2019-02-1104:19:05【问题描述】：我正在使用FirebaseFunctionsShell在Node中本地测... 查看详情

嵌套查询未按预期工作

】嵌套查询未按预期工作【英文标题】：Nestedquerynotworkingasexpected【发布时间】：2012-11-1812:26:01【问题描述】：我正在试验ElasticSearch。我在查询嵌套对象时遇到问题。我的映射：curl-XGEThttp://localhost:9200/testt/resource/_mapping?pretty"resou... 查看详情

查询结果未按预期返回

】查询结果未按预期返回【英文标题】：QueryResultNotReturnedAsExpected【发布时间】：2020-03-2819:23:47【问题描述】：我正在努力解决几天前根据一位SO用户的建议尝试的查询，并使其与以下内容一起使用：WITHyour_table(ID,STOREDATE,VALUE,INFO... 查看详情

laravel，查询生成器，（或）查询未按预期工作

】laravel，查询生成器，（或）查询未按预期工作【英文标题】：laravel,querybuilder,(or)wherequerynotworkingasexpected【发布时间】：2018-08-0806:22:50【问题描述】：这是我的laravel查询$Product=Product::select(\'id\',\'ProductWorkpiece\',\'ProductCategory\',\'... 查看详情

SQL 查询未按预期给出结果

】SQL查询未按预期给出结果【英文标题】：SQLquerynotgivingresultasexpected【发布时间】：2018-04-1902:21:21【问题描述】：我需要一些帮助。我有下表（示例如下所示）：EmpID|Type|timestamp|block_id----------------------------------------------------1|\'R\... 查看详情

Firebase iOS 查询未按预期排序

】FirebaseiOS查询未按预期排序【英文标题】：FirebaseiOSquerynotorderingasexpected【发布时间】：2015-03-2500:35:56【问题描述】：我已使用childByAutoId保存了我的数据，因此它在Firebase中按时间顺序排列。当我使用下面的查询进行查询，然后... 查看详情

Azure Functions functionAppScaleLimit of 1 未按预期工作以限制队列触发器上的并发

】AzureFunctionsfunctionAppScaleLimitof1未按预期工作以限制队列触发器上的并发【英文标题】：AzureFunctionsfunctionAppScaleLimitof1isn\'tworkingasexpectedtolimitconcurrencyonQueueTrigger【发布时间】：2021-02-0811:56:46【问题描述】：我有一个设置了多个队... 查看详情

查询未按预期执行，无论如何都返回 -1

】查询未按预期执行，无论如何都返回-1【英文标题】：Querynotexecutingasexpected,returns-1nomatterwhat【发布时间】：2021-06-2312:47:16【问题描述】：我正在为期末考试开发用户登录系统。我在带有ADO.NET的VisualStudio中使用C#。我在名为Creden... 查看详情

Postgres 中的 LTREE 祖先查询未按预期工作

】Postgres中的LTREE祖先查询未按预期工作【英文标题】：LTREEancestorqueryinPostgresnotworkingasexpected【发布时间】：2020-03-1818:25:23【问题描述】：我有一个带有LTREE列的表，数据如下所述。IDLabelPath1.ABC.12.DEF.1.226.GHI.1.2.26假设我想找到标... 查看详情

Laravel Eloquent Model 相关查询未按预期工作

】LaravelEloquentModel相关查询未按预期工作【英文标题】：LaravelEloquentModelrelatedquerynotworkingasintended【发布时间】：2020-07-0321:12:29【问题描述】：我有两张桌子。codes和translations。代码表id|name---|------1|A99翻译表id|code_id|language_code|copy-... 查看详情