Ma requête média ne fonctionne pas sur mon appareil Android

Question

Ma requête média fonctionne correctement dans le navigateur de PC lorsque je la redimensionne, mais quand j'accède à mon site via localhost avec mon appareil Android, ma requête média ne fonctionne pas? Quel peut être le problème? Mon appareil a des résolutions de 480 x 800 pixels.

Voici ma requête média:

@media (max-width: 480px) { 
#main{width:90%;position:relative;} 
div.itemRelated ul li {float: left;width: 20%;} 
div.itemRelated ul li a img{width:90%;} 
div.itemRelated ul li a{text-align:center;} 
.maincontent{width:90%;font-size:.7em;} 
#base{width:100%;} 
h2, h2 a:link, h2 a:visited{font-size:.7em;} 
#container_header{width:96%;} 
#container_slideshow{display:none;} 
#container_main{width:90%;margin: 0 auto;} 
.wrapper960{margin:0 auto;}/*ova treba da se cepne*/ 
#sidecol_b, #sidecol_a{display:none;} 
#content_remainder{width:96%;clear:both;top:0;} 
#container_bottom_modules{display:none;} 
#container_spacer3{display:none;} 
#jazik{float:left;} 
.sigProContainer sigProClassic sigProClassic{margin-left:10%;} 
#hornav{padding-left:5px;} 
#hornav ul li a{font-size:1em;padding: 0 5px;width:8%} 
#container_header{width:100%;} 
#socialmedia{display:none;} 
#search {clear:both;top: 20%;left: 15%;} 
.content{width:66%;} 
} 

Answer 1

Si vous êtes Ciblant spécifiquement appareil Android, ou tout autre appareil avec 480x800 essayer ce

@media only screen and (min-device-width: 480px) { 
    /* Style goes here */ 
} 

Un très bon article si vous aimez lire

Answer 2

La largeur des appareils Android est souvent la screensize réelle. Si vous voulez avoir la largeur de l'écran, vous avez besoin d'une balise méta viewport.

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

Utilisez cette balise meta dans votre code HTML

Mise à jour:

Le code ci-dessus désactive également la mise à l'échelle (zoom), ce qui est agréable pour les utilisateurs. Donc, vous pouvez le faire sans désactiver mise à l'échelle:

<meta id="viewport" name="viewport" content ="width=device-width" /> 

Answer 3

J'ai rencontré un problème similaire entourant la multitude de largeurs d'écran de périphériques Android et les densités d'écran.

En fin de compte je me suis installé sur cette requête média:

@media only screen and (max-width: 765px) { 
    /* Style goes here */ 
} 

Mais here est un site pratique qui fournit plus l'appareil et l'orientation des requêtes média spécifique