html - Safari 和 Chrome 媒体查询不起作用

Question

我有一个 Bootstrap 菜单，它会在浏览器变小时折叠。我还有第二个菜单，它在小型设备上消失并出现在折叠的第一个菜单中。它在 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

您不需要使用每个尺寸定义来定义屏幕。

这应该可以解决问题:

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>