Consultas de mídia não funcionam no celular
Perguntas semelhantes foram feitas aqui antes, mas depois de ler as mensagens ainda não encontrei uma resposta que funcione com o meu site.
Eu criei o site em torno do Bootstrap, mas adicionei algumas das minhas próprias consultas de mídia. O site de teste ao vivo está em:http://agoodman.com.au
As seções que estão sendo alteradas pelas consultas de mídia são "nossas taxas" e a sobreposição de "mapa". Se você estiver em um laptop, redimensionar o navegador faz com que essas seções sejam exibidas como blocos.
Meus links de folha de estilo:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/user.css" rel="stylesheet">
"User.css" é apenas um arquivo separado porque eu queria poder manter e atualizar a estrutura principal do bootstrap conforme necessário. User.css substitui os estilos no bootstrap. Minhas consultas de mídia no user.css são as seguintes:
@media screen or handheld(max-width: 979px) {
.fee-buttons {
height: auto;
font-weight: 600;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.fee-buttons .transformation {
width: 100% !important;
height: 300px;
position: relative;
z-index: 10;
left:0;
}
.fee-buttons .hourly, .fee-buttons .membership {
float: none;
width: 100% !important;
}
li.button{
overflow:visible;
}
}
@media screen or handheld(max-width: 995px) {
#overlay {
position: relative;
display: block;
width: auto;
right: 0;
padding:1em;
}
}
Como eu disse, nos navegadores de desktop isso funciona bem, mas nos navegadores de dispositivos móveis não está funcionando. Eu testei ambos em um iPhone 4 (usando safari) e em um HTC Desire (usando o navegador android de ações) e ambos são exibidos da mesma maneira - ignorando a consulta de mídia e exibindo o site completo com muito conteúdo realmente esmagado e que não faz jus .
Alguma idéia do que estou fazendo errado aqui?
EDITAR:
Aqui estão as imagens do que éDEVEMOS parece com uma largura de tela pequena:
E o que parece atualmente no Android e iPhone, onde o dispositivo está ignorando minhas consultas de mídia: