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

Pardoes

maybe there shouldn't be commas in front of the ands? – Anew

#15977251 Someone also had some problems with Safari-Media-Queries. Did you already check your CSS-Code of missing braces anywhere? Safari seems to be slightly fussy. – Iago

Hi Dustin, yes I've already checked for missing braces and they're all in there! – Pardoes

@Anew the commas don't make a difference, Safari still isn't picking up the query – Pardoes

and you're trying this on a screen with 192dpi? – Iago

yeah, I am. It was all working fine yesterday – Pardoes

can you reproduce that in a fiddle? – Iago

pixel-ratio can't be 1 while resolution is 192dpi. – Iago

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.

Oceanic

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

Pardoes

Answer 3

// For safari version 15.4 only 

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

  .search-field .top-search .form-group input[type='search'] {
     height: 44px !important;    
    }
    .dropdown{ padding: 2px 20px; }
    .nice-select{height: 44px;}
}


@media screen and (min-resolution: 192dpi) { 
  body{line-height: 26px!important;}
 .search-field .top-search .form-group input[type='search'] {
     height: 44px !important;
  }
  .dropdown{ padding: 2px 20px; }
  .nice-select{height: 44px;}   

}

For Example :

Inotropic

Answer 4

@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (stroke-color:transparent) {

//add ur media queries. //Queries inside this will work only for safari

}

Rola