Media Queries not working in Safari

15,627

Solution 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.

Solution 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

Share:
15,627
Lana
Author by

Lana

Updated on June 19, 2022

Comments

  • Lana
    Lana over 1 year

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