@media (max-width: 320px) does not work on Android

I'm using @media (max-width: 320px) does not work on Android , only on Windows Phone .

What to do in this case?

html :

<button class="menuAbrir"><img  src="_img/btn-menu.png" width="50px;" title="Abrir Menu" /></button>
<nav class="menuNav">
  <a class="menuFechar"><img  src="_img/btn-close.png" width="30px;" title="Abrir Menu" /></a><br>
  <ul class="menuUlTopo">
    <li class="menuTopo"><a href="principal.php" title="Principal">Principal</a></li>
    <li class="menuTopo"><a href="administradoresMenu.php" title="Administradores">Administradores</a></li>
    <li class="menuTopo"><a href="clientesMenu.php" title="Clientes">Clientes</a></li>
    <li class="menuTopo"><a href="imoveisMenu.php" title="Imóveis">Imóveis</a></li>
    <li class="menuTopo"><a href="tiposMenu.php" title="Tipos de Imóveis">Tipos de Imóveis</a></li>
    <li class="menuTopo"><a href="emails.php?acao=listar" title="E-mails">E-mails</a></li>
  </ul>
</nav>

<script>
$(document).ready(function(e){
  $(".menuAbrir").click(function() {
    $(".menuNav").show();
    $(".menuFechar").show();
  });

  $(".menuFechar").click(function() {
    $(".menuNav").hide();
    $(".menuAbrir").show();
  });
});
</script>

css :

#menu
{
  top:165px;
  height:50px;

}

.menuAbrir {
     display:none;
}

.menuNav {
      display:block;
}

.menuFechar {
    display:none;
}

a, a:hover {
    text-decoration:none;
    color:#FFF;

}

ul {
    list-style-type:none;
    padding:0;
}

ul.menuUlTopo {
    width: 100%;
    height:100%;
    background-color:#006600;
}

ul li.menuTopo:last-child { 
    border-right: #005E9C 1px solid;
}

ul li.menuTopo {
    float:left;
    width:165px;
    height:50px;
    line-height:50px;
    text-align:center;
    border-left: #005E9C 1px solid;     
}

ul li.menuTopo a {
    width:165px;
    height:50px;
    display:block;
    vertical-align:middle;  
    color: #FFF;
    background-color:#006600;
}

ul li.menuTopo a:hover, ul li.menuBase a:hover {
    color: #FFF;
    background-color:#CCC;
}

ul menuUlBase {
  width: 50%;
}

ul li.menuBase {
    width:40%%;
    height:25px;
}

ul li.menuBase a {
    width:150px;
    height:25px;
    display:block;
    vertical-align:middle;      
    background-color:#006600;
}

/* @media screen and (max-width:320px){
@media (max-width: 320px) {*/

@media screen and (min-width: 0px) and (max-width:320px)  {

 .menuAbrir {
     display:block;
     width:60px;
     height:60px;
     top:0;
 }

 .menuNav {
      display:none;
      position:fixed;
      top: 0;
      left:0;
      width: 100%;
      height:100%;
  }

  ul.menuUlTopo {
      float:left;
  }

  .menuFechar {
      float:right;
  }

  ul li.menuTopo a {
      width: 320px;
      height: 480px;
  }
}

@media screen and (min-width: 320px) and (max-width:480px)  {

 .menuAbrir {
     display:none;
 }  

  ul.menuUlTopo {
      display:block;
      height:100px;
  }

  .menuFechar {
      display:none;
  }

  ul li.menuTopo a {
      width: 158.6px;
      height: 50px;
      font-size: -20%;
  }

  ul li.menuTopo {
      width: 158.6px;
      height: 50px;
  }


}