How to set media query for safari web browser

Question

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

Answer 1

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