媒体查询不适用于Chrome和设备，但适用于Firefox

Question

I am working with mobile menu, in mobile device i need mobile menu. For that i did this

<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>

So, it should show mobile menu in mobile, but it not affecting in chrome and mobile also. Although same thing working in my other page.

Live workin link http://test.coachfxlive.com/user

Live not working link http://test.coachfxlive.com/shop

Answer 1

Here is my fiddle http://jsfiddle.net/3fhgfbb2/1/ , all I added was some color to show that media query is working and changed the max-width: to 500px so it works better with the fiddle.

here is the 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; }
}

Answer 2

Issue is not with media query or bootstrap, It because of this meta tag

<meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=1024" >

I replaced it with this one, and it working great.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">