媒体查询在 Safari 中不起作用 [英] Media Queries not working in Safari

问题描述

我的媒体查询在 Firefox 和 Chrome 中有效，但在 Safari 中无效.

@media screen (-webkit-min-device-pixel-ratio: 1),和(最小设备宽度:1000px)，和(最大设备宽度:1600px)，和(最小分辨率:192dpi){}

在我添加一些额外的代码来支持 Firefox 之前，它们在 safari 中运行得非常好.

我也有

<块引用>

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

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

请帮忙！！

解决方案

您的操作:

@media screen (-webkit-min-device-pixel-ratio: 1),和(最小设备宽度:1000px)，和(最大设备宽度:1600px)，和(最小分辨率:192dpi){}

阅读:

or and (min-device-width: 1000px)或和(最大设备宽度:1600px)或和和(最小分辨率:192dpi)

通过文档:

<块引用><块引用>

逗号分隔的列表

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

要么检查这是预期的行为，要么将逻辑操作 and 和 or 彼此分开...Firefox/Chrome 对规则有更好的实现，因此可以修复"规则.常见的逻辑谬误.

My media queries are working in Firefox and Chrome but not Safari.

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

They were working absolutely fine in safari until I added in some extra code to support Firefox.

I also have

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

in my HTML so it's not this.

Please help!!

解决方案

Your operation:

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

reads:

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

By documentation:

comma-separated lists

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

Either check that this is the intended behavior, or separate the logical operations and and or from each other... Firefox/Chrome have better implementations on rules, and can thus "fix" common logical fallacies in them.

这篇关于媒体查询在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！