Search code examples
htmlcssbrowsersafarimedia-queries

How to set media query for safari web browser

@media only screen and (min-width: 480px) and (max-width: 767px) {
}

Here is my media query how to fix it. how to set for safari web browser.

Solution

  • Media queries aren't made for browser detection. Use javascript instead, for example: 

    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) 
{
   alert("Browser is Safari");          
}

    From this point you could set a class on the body tag to indicate a safari browser.

    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) 
{
   document.getElementsByTagName("BODY")[0].className += " safari";
}

    Then you can use your CSS to target only safari elements like so:

    body.safari h1{
    color: cyan;
}

    More discussion on detecting the browser can be found here