Clarté sur la largeur de pixel du design réactif

Question

Nouveauté dans le design responsive et j'essaye de travailler sur quelque chose.

Le Galaxy Note 2 a une dimension de pixels de 1280 x 720 et je spécifier le CSS suivant:

@media (min-width:769px){ 
    #mobile{ 
     display:none; 
    } 
    #tablet{ 
     display:none; 
    } 
    #desktop{ 
     width:100px; 
     float:left; 
     background-color:green; 
    } 
} 
@media (min-width:321px) and (max-width:768px){ 
    #desktop{ 
     display:none; 
    } 
    #tablet{ 
     width:100px; 
     float:left; 
     background-color:black; 
     color:white; 
    } 
    #mobile{ 
     display:none; 
    } 
} 

@media (max-width:320px){ 
    #desktop{ 
     display:none; 
    } 
    #mobile{ 
     width:100px; 
     float:left; 
     background-color:blue; 
     color:white; 
    } 
    #tablet{ 
     display:none; 
    } 
} 

Le téléphone (comme prévu) montre la "version" mobile du site, mais je ne le font pas comprendre pourquoi il tombe dans la catégorie 321px < quand il a la dimension précédemment mentionnée!

Le code suivant?

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

Espérons que de l'aide avec ceci! Merci :)

Answer 1

C'est parce que "utilise l'appareil css pixels indépendants" qui ne sont pas les mêmes que les pixels de l'appareil. Vous pouvez également utiliser des requêtes multimédias sur le ratio de pixels pour sélectionner des périphériques avec une densité de pixels plus élevée.

A List Apart: A Pixel Identity Crisis

De plus, s'il vous plaît noter que la résolution réelle ne soit pas inférieure. Le navigateur utilise simplement une unité de mesure différente.

Answer 2

Les navigateurs sur certains périphériques mobiles utilisent une résolution inférieure pour accélérer le moteur de rendu. Vous pouvez utiliser JS pour vérifier la largeur et la hauteur utilisées par le navigateur.

alert('Window: '+$(document).width()+'x'+$(document).height()); 

Fiddle: http://jsfiddle.net/fGVAg/