Question

Windows桌面上的Safari浏览器无法响应CSS，这是我的例子，它不会在safari上工作，但在其他浏览器上完全正常工作：

<style>
#wrape{
  width: 500px;
  height: 500px;
  background-color: green
}
@media screen and (max-width:750px){
   #wrape {
     display: none
   }
}
</style>

<div id="wrape"></div>

这非常混乱，我一直在研究找到解决这个问题的正确解决方案，这是我迄今为止所发现的。

将此元标记放在头标记中：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

将CSS代码更改为：

可能的解决方案1 

@media only screen and (max-width:750px) {
  #wrape {
     display: none
  }
}

可能的解决方案2

@media (max-width:750px) {
  #wrape {
     display: none
  }
}

可能的解决方案3

@media screen and (min-device-width:750px) and (max-width:750px){
  #wrape {
     display: none
  }
}

我还尝试使用#wrape { display:none !important }

覆盖任何CSS样式

我似乎无法找到任何可行的解决方案，我会提供任何帮助。

Answer 1

试试这个（没有min-device-width）

@media screen and (max-width:750px){ 
  #wrape {
     display: none
  }
}

Windows桌面上的Safari浏览器无法响应CSS @media

1 个答案: