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

Question

I’m using @media (max-width: 320px) does not work in the Android, only in the 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;
  }


}

Answer 1

Well, it should work, in my tests I was able to use it that way. This solution is not ideal by web standards, but use this script to see if the problem really is css:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; 
var androidStyle = "\
.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;\
  }";
if(isAndroid && $(window).width() <= 320){
  androidStyle = "<style>" + androidStyle + "</style>";
  $("head").append(androidStyle);
}