CSS Media Queries Not Working in Safari

Why is safari does not react to my media queries?

Okay, I figured this.

I haven't made it work the way I planned initially but I guess this will be the best thing to do.

THE ANSWER

So apparently Safari doesn't react to media queries with specific resolutions and you have to use ranges with either min or max height or width. Just rewrite your queries and Safari will handle them right

Before you throw me a comment - yes, I'm aware that it's not the best practice to put specific resolutions and media queries. I was trying to make this way so I can tailor the design for each resolution. I didn't wanted to expand mobile design for tablets and I did wanted them to keep desktop version in landscape while preserve mobile in portrait.

The easier way to achieve that effect was to aim in specific green sizes - it didn't work out and now I realize that I can achieve the same effect with different queries for width and height.

As a bonus I'm willing to share queries sizes I found perfect for screens from iPhone SE to MacBook Pro 16

@mixin respond ($breakpoint){
        
        @if $breakpoint == phone {

           
            @media screen and (max-width: 1024px) and (max-height: 1366px){
                 //this is for phones and tablets in portrait

                
                // query styles go here  }}

    @if $breakpoint == tab_land {

@media screen and (min-width: 1024px) and (max-height: 1366px){ 
            //query styles go here}
        }}

    @if $breakpoint == mac13 {

        @media screen and (min-width: 1366px) {

            // query styles go here  }}

        @if $breakpoint == mac15 {

            @media screen and (min-width: 1600px) {
    
                // query styles go here  
            }}

            @if $breakpoint == mac16 {

                @media screen and (min-width: 2560px) {
                    // query styles go here  
                }

       

}

@media queries not working in Chrome or Safari iOS

So what I found actually was that I am dealing with a browsers catching function. Rather than a problem with my @media queries. The strange thing is that Firefox loads the new web content immediately. While chrome and safari, I have to manually clear the cache and cookies every time in order to see the changes I made on the web server.

Edit - a fix posted by Jason bamber

You can easily bust the browser cache when you make changes, by appending a query string to the css <link rel="stylesheet" href="help.css?v=10" type="text/css"/> change the number when you make a change –

Related Topics