Les Media queries ne marche pas comme prévu sur Android

J'ai 4 requêtes de média. Le 1er, 3e et 4e de travail, mais le 2ème ne semble pas à l'activer.

Pourquoi le 480x720 (deuxième requête de média) défaillant à la première requête de média?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

Ce qui est attendu:

Les Media queries ne marche pas comme prévu sur Android
Les Media queries ne marche pas comme prévu sur Android
Les Media queries ne marche pas comme prévu sur Android
Les Media queries ne marche pas comme prévu sur Android

Ce qui se passe réellement:

Les Media queries ne marche pas comme prévu sur Android
Les Media queries ne marche pas comme prévu sur Android
Les Media queries ne marche pas comme prévu sur Android
Les Media queries ne marche pas comme prévu sur Android

Pourquoi le 480x720 (deuxième requête de média) défaillant à la première requête de média?

erreur d'arrondi?
Peno, je n'ai aucune idée de ce que signifie lol, mais en théorie, il devrait fonctionner hors de la boîte, mais il ne veut pas ! j'ai essayé des centaines de variations de la requête, mais il ne semble toujours pas de travail.

OriginalL'auteur Xavier | 2011-05-18

  1. 9

    Je pense que vous avez besoin de faire un dispositif de détection de résolution dans votre requête de support le long de la lignes de 

    @media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}

    Vérifier David Calhoun excellent article sur les meilleures pratiques.

    OriginalL'auteur DyeA

  2. 24

    Je suis un newbie sur android et CSS.

    J'ai résolu le android de ne pas donner à elles taille réelle avec une ligne dans l'en-tête de mon index.html fichier:

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

    À partir de là, mes fichiers CSS fait ce que j'attendais!

    Cela a fait le tour. Merci!

    OriginalL'auteur JohanO

  3. 12

    Donc, après avoir fait des CHARGES de la recherche, j'en suis venu à cette conclusion, les téléphones Android, qui disent qu'ils sont 480px par 720px (800px ou 854px) sont en fait pas, ils ont une plus forte densité de l'écran pour rendre les éléments paraissent plus grands, de sorte qu'ils fonctionnent en réalité à 320px par XXX, mais l'utilisateur peut changer la résolution d'une baisse spec si elles le souhaitent. La raison pour laquelle la requête des médias n'a pas de travail, parce que les tailles n'étaient pas pertinents pour l'appareil en question.

    Si votre sur le SDK, j'ai changé la densité de l'écran vers le bas à 160 pour accueillir 480px de large.

    Et je peux confirmer que j'ai testé cela sur le SDK et 2x Combinés.

    Remarque: il a été mon expérience personnelle, il pourrait être différent pour d'autres utilisateurs

    OriginalL'auteur Xavier

  4. 7

    J'ai eu les mêmes problèmes lors de l'utilisation d'un Cordova application pour la plateforme Android. Grâce à la dernière réponse, j'ai essayé de trouver où étaient les différences entre ma requête des médias et de la largeur de l'écran périphériques.

    J'ai d'abord essayé :

    @media only screen and (max-device-width: 480px) { ... }

    Pour correspondre à des appareils comme le HTC Desire HD | Samsung Galaxy S. Mais j'ai également eu à faire des corrections pour le Samsung Galaxy Note, j'ai donc utilisé :

    @media only screen and (min-device-width: 481px) { ... }

    Mais ces résolutions, comme dit précédemment, ne sont pas vraiment utilisés comme dans la vue web, la densité de pixel a les valeurs changé.

    Donc je voulais savoir combien de pixels en largeur ont été reconnus dans les deux DHD et de SGS, et puis en SGN :

    window.innerWidth

    Pour la 480px largeur de téléphones, j'avais effectivement 320px reconnu. Pour le 800px Galaxy Note, je n'ai eu que 500px reconnu. Quand j'ai vu ça, j'ai ajusté mes requêtes de média et cela a fonctionné.

    OriginalL'auteur jcbee

  5. 2

    voici quelques choses que j'ai trouvé dans mon expérience et peut-être en raison de la résolution élevée de détection.
    Mon préféré de test de téléphone est 320px(max-device-width) X 480px(max-device-width) en mode portrait. Mais selon sur qui mobile navigateur que j'utilise le max-width peut être jusqu'à 850px!! Opera mobile utilise 850px par défaut max-width, même si son sur un appareil de max-device-width 320px. Mieux encore; le construit en Andriod navigateur sur cet appareil a un défaut max-width de 550px. Dolphin est par défaut le même max-width, 550px. Je n'ai pas l'habitude de tester sur FireFox mobile, mais depuis, c'est un gecko à base de navigateur comme Opera, je ne serais pas surpris si elle tombe dans le 850px gamme. Quelqu'un sait ou testé?

    j'utilise généralement un 3 condition requête de média lors de l'adressage de 320 X 480 appareils.

    @media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

    aussi j'ai l'habitude de placer cette balise meta dans mon en-tête sur-le-main page-entrez le code ici

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

    Suivantes ne semblent m'aider, c'est quand j'ai fait un peu plus de recherche et compris les informations ci-dessus.
    <meta name="viewport" content="width=device-width" /> Espère que cela aide quelqu'un d'autre.

    N'est-ce pas (max-width:850px) and (max-width:550px) faire la même chose. Reste plus qu'à vérifier de plus de 550px?

    OriginalL'auteur kevinB

  6. 1

    Depuis les téléphones cellulaires sont de plus en plus de trou noir de la résolution de la confusion, vous devez leur dire de s'identifier. Vous devez également définir la mise à l'échelle 1 et de tenir à l'écart de l'utilisateur mise à l'échelle. Quand j'ai mis ceci dans mon code, il fait l'affaire pour moi.

    Insérer cet extrait de code dans le head de votre code HTML sur la ligne en dessous de la <meta character...> tag.

    <!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    Résolu mon problème tout simplement avec un problème d'affichage qui a été me rend fou.

    OriginalL'auteur richardsonae

  7. 0
    1. Convertir tous px valeurs de em valeurs en les divisant par 16 (donc 16px va devenir 1 em). Cela permet de s'assurer que la taille d'avoir la bonne proportion, que sur la police de caractères utilisée.
    2. Ajouter à votre meta viewport: target-densitydpi=medium-dpi. Cela permet de s'assurer que le em- tailles se comportent de manière identique à tous (la plupart?) appareils

    OriginalL'auteur ToBe_HH