媒体查询在 Safari 中不起作用

Question

我的媒体查询可以在 Firefox 和 Chrome 中运行，但不能在 Safari 中运行。

@media screen (-webkit-min-device-pixel-ratio: 1),
    and (min-device-width: 1000px), 
    and (max-device-width: 1600px),
    and (min-resolution: 192dpi) { } 

它们在 safari 中工作得非常好，直到我添加了一些额外的代码来支持 Firefox。

我也有

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

在我的 HTML 中，所以不是这个。

请帮忙！！

Answer 1

您的操作：

@media screen (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px), 
and (max-device-width: 1600px),
and (min-resolution: 192dpi) { } 

内容如下：

or and (min-device-width: 1000px)
or and (max-device-width: 1600px)
or and and (min-resolution: 192dpi)

通过文档：

以逗号分隔的列表

or在媒体查询中使用时，逗号分隔列表的行为类似于逻辑运算符。使用逗号分隔的媒体查询列表时，如果任何媒体查询返回 true，则会应用样式或样式表。逗号分隔列表中的每个媒体查询都被视为单独的查询，应用于一个媒体查询的任何运算符都不会影响其他媒体查询。这意味着逗号分隔的媒体查询可以针对不同的媒体功能、类型和状态。

要么检查这是否是预期的行为，要么将逻辑操作分开and…… orFirefox/Chrome 在规则上有更好的实现，因此可以“修复”其中常见的逻辑谬误。