safari 和 chrome 媒体查询不起作用

Question

我有一个引导菜单，它会在缩小浏览器时折叠。我还有第二个菜单，它在小型设备上消失并出现在折叠的第一个菜单中。它在 Firefox 中运行良好，但在 safari 和 chrome 中却不行。这是我的代码：

 li.hideshow {
   display: none;
 }
 @media screen and (max-width: 500px),
 screen and (-webkit-min-device-pixel-ratio: 1) {
   img.smallResolution {
     max-width: 220px;
   }
   li.hideshow {
     display: block;
   }
 }

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#point1">publisher</a>
    </li>
    <li><a href="#point2">advertiser</a>
    </li>
    <li><a href="#point3">news</a>
    </li>
    <li><a href="#point4">contact</a>
    </li>
    <li class="hideshow"><a href="#">point5</a>
    </li>
    <li class="hideshow"><a href="#">point6</a>
    </li>
    <li class="hideshow"><a href="#">point7</a>
    </li>
  </ul>
</div>

我搜索了很多，但我没有找到答案。我希望有人能看到这里出了什么问题。

谢谢。

Answer 1

好的，我将最大宽度更改为 600 像素，现在它可以在 FF、Chrome 和 SAFARI 中使用。我注意到这三个浏览器都有自己的自定义边框，因此您可以最大程度地减小 FF 的浏览器窗口宽度，然后是 Chrome，然后是 Safari。 感谢@DCdaz 和@Germano Plebani 的回答。

Answer 2

试试这个：

@media only screen and (max-width: 500px),
       only screen and (-webkit-min-device-pixel-ratio: 1) {
    ...
    ...
}

或者：

@media (max-width: 500px), (-webkit-min-device-pixel-ratio: 1) {
    ...
    ...
}

Answer 3

您不需要为每个尺寸定义定义屏幕。

这应该可以解决问题：

li.hideshow {
  display: none;
}
@media handheld, screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 1) {
  img.smallResolution {
    max-width: 220px;
  }
  li.hideshow {
    display: block;
  }
}

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#point1">publisher</a>
    </li>
    <li><a href="#point2">advertiser</a>
    </li>
    <li><a href="#point3">news</a>
    </li>
    <li><a href="#point4">contact</a>
    </li>
    <li class="hideshow"><a href="#">point5</a>
    </li>
    <li class="hideshow"><a href="#">point6</a>
    </li>
    <li class="hideshow"><a href="#">point7</a>
    </li>
  </ul>
</div>