如何为 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");          
}

从这一点开始，您可以在正文标签上设置 class 以指示 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