Media Queries not working in Safari

Question

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!!

Answer 1

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.

Answer 2

I have solved it, I have separated the media query into two so that it is

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

and then

@media screen and (min-resolution: 192dpi) { }

this has solved the issue