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

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;
}

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