Quando você utiliza MIN-WIDTH
e MAX-WIDTH
ele se refere a largura do browser que você está utilizando atualmente com base na resolução do dispotivo, ou seja, o problema é gerado pois mesmos dispositivos menores como um iphone por exemplo possui a mesma resolução de monitores comuns.
A melhor alternativa é utilizar o DEVICE WIDTH
que se refere a largura da tela que o dispositivo aparenta ter (EX: 1024 de uma tela 1024X768) ou seja você não trabalha com resoluções, você trabalha com tamanhos de tela.
Para fazer com que a media querie se baseie nisso é necessário utilizar a metatag VIEWPORT
que faz com que a resolução fique do mesmo tamanho que a tela do aparelho, ou quase isso. Ela faz o dispositivo utilizar a largura que aparenta ter e não sua resolução.
Mais sobre o viewport aqui: Manipulando o Viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
OBS: Você pode modifica-lá a sua necessidade alterando o valor dos atributos:
width - Define uma largura para o viewport. Os valores podem ser em
PX ou “device-width”, que determina automaticamente um valor igual a
largura da tela do dispositivo.
height - Define uma altura para o viewport. Os valores podem ser em
PX ou “device-height”, que determina automaticamente um valor igual a
altura da tela do dispositivo.
initial-scale - Define a escala inicial do viewport.
user-scalable - Define a possibilidade de o usuário fazer “zoom” em
um determinado lugar da tela. É ativado quando o usuário bate duas
vezes com o dedo em um lugar da tela.
Com isso, seu código irá se basear na largura do dispositivo. Um iphone tem uma largura bem menor que um monitor de 24", ou seja, isso não gerará o problema visto que monitores sempre serão maiores que dispositivos móveis e a media querie utilizará sua largura como base.
Eu considero, esta a alternativa mais viável e que recomendo, já que dispositivos com tamanhos de telas diferentes carregam regras CSS diferentes, ou seja, um dispositivo móvel não exibirá coisas específicas para desktops e vice-versa.
Outra alternativa é trabalhar com device width diretamente nas media queries mas isso é um pouco trabalhoso visto que deve-se adicionar max-device-width, min-device-width em cada media querie.
EX:
@media only screen and (max-device-width: 1024px) { ...