如何为Safari Web浏览器设置媒体查询 [英] 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.

推荐答案

不是针对浏览器检测进行媒体查询的.改用javascript，例如:

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

这时，您可以在body标签上设置一个类，以指示野生动物园浏览器.

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

然后，您可以使用CSS仅定位safari元素，如下所示:

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

body.safari h1{
    color: cyan;
}

可以在此处

这篇关于如何为Safari Web浏览器设置媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！