如何为safari Web浏览器设置媒体查询

Question

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

这是我的媒体查询如何解决它。如何设置Safari浏览器。

Answer 1

媒体查询不适用于浏览器检测。请改用javascript，例如：

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

从这一点开始，您可以在body标签上设置一个类来表示Safari浏览器。

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

然后你可以使用你的CSS来定位像这样的safari元素：

body.safari h1{
    color: cyan;
}

可以找到有关检测浏览器的更多讨论here