html - 媒体查询不适用于 chrome 和设备，但适用于 firefox

Question

我正在使用移动菜单，在移动设备中我需要移动菜单。为此我做了这个

<style type="text/css">
.navbar-mini-menu a {
   color: #fff !important;
   cursor: pointer;
   display: block;
   padding: 1rem 1.5rem;
   text-decoration: none;
   transition: background-color .16s ease-in;
}

.navbar-mini-menu a:hover {  background-color: #CD5C5C; }
.navbar-mini-menu {  background-color: #000;  display: none; }
.navbar-mini-menu .menu-select {  color: #fff;  padding: 0.4rem 1.5rem; }

.navbar-mini-menu .menu-select .btn-select {
    background: url("http://test.coachfxlive.com/images/mobile-icon.png") no-repeat;
    cursor: pointer;
    position: absolute;
    height: 30px;
    width: 30px;
    right: 10px;
    top: 10px;
}

.navbar-mini-menu .mini-menu-options {  display: block; }
.navbar-mini-menu .mini-menu-options li {  display: block; }
.navbar-mini-menu .mini-menu-options li .submenu {  display: none; }
.navbar-mini-menu .mini-menu-options li:focus {  outline: 0; }
.navbar-mini-menu .mini-menu-options li:focus > .submenu {
     display: block;
     -webkit-animation-name: showSubMenu;
     -webkit-animation-duration: .4s;
 }

.navbar-mini-menu .mini-menu-options li a {  display: block;  padding: 1rem 1.5rem; 
}


.header {
   background-color: #000;
   height: auto;
   left: 0;
   min-height: 43px;
   padding: 6px 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000
}

@media screen and (max-width: 768px) {
 .header {  margin: 0;  }
 .header {  display: none;  }
 .navbar-mini-menu {   display: block; }
 .navbar-mini-menu .mini-menu-options {  display: none;  }
 .topgap{   display: none; }
}
</style>

<div class="header">menu</div>
<div class="navbar-mini-menu">mobile menu</div>

因此，它应该在移动设备中显示移动菜单，但它不会影响 chrome 和移动设备。虽然同样的事情在我的其他页面上工作。

在线工作链接http://test.coachfxlive.com/user

实时链接无效 http://test.coachfxlive.com/shop

Answer 1

这是我的 fiddle http://jsfiddle.net/3fhgfbb2/1/ ，我只添加了一些颜色来显示媒体查询正在工作，并将 max-width: 更改为 500px，以便它可以更好地与 fiddle 配合使用。

这是CSS

.header{width: 100%; height: 100px; background-color: blue; text-align: center;color: white;}
.navbar-mini-menu{
    width: 100%; 
    height: 100px; 
    background-color: red; 
    text-align: center;
    color: white;
    display: none;
}
@media screen and (max-width: 500px) {
 .header {  margin: 0;  }
 .header {  display: none;  }
 .navbar-mini-menu {   display: block; }
 .navbar-mini-menu .mini-menu-options {  display: none;  }
 .topgap{   display: none; }
}