CSS Media Queries sur la Nexus 7, résolution de l'écran ne fonctionne pas dans le code

Je travaille avec les CSS Media Queries pour charger des modèles différents pour les différentes tailles d'appareils. J'ai créé une feuille de calcul d'inscription de la résolution d'affichage de dispositifs de test et la plupart des périphériques communs à venir avec la taille des seuils. L'un des appareils que je suis en essais est la Nexus 7, j'ai trouvé la résolution de l'écran est de 1280 × 800. Cependant quand j'utilise ces valeurs dans mon code, ça ne fonctionne pas.

**la seule raison pour laquelle j'utilise pas de max ou min est parce que je suis en train de trouver la résolution exacte. Si je le remplace avec max-device-width, avec quelque chose d'assez grand, il fonctionne, et j'ai fait assez de tests pour savoir qu'il travaille avec différentes valeurs max, mais afin de remplir correctement mon code pour différencier entre 3 taille différente des catégories d'appareils, je dois m'assurer que je suis de la création de la coupe droite-offs. Est CSS résolution différente? Merci pour toute aide à l'avance!

@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
} 

@media only screen and (device-width:800px) and (orientation:portrait) {

/*style --code removed for sack of space */

}

Voici ma fenêtre de code dans mon fichier html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Je sais que certains appareils où la largeur et l'orientation ne sont pas toujours de paire dans une manière qui fait sens. Avez-vous essayé de ciblage @media only screen and (device-width:1280px) and (orientation:portrait) ?
Merci pour la réponse. J'ai découvert par le biais d'essais et d'erreur qui device-width et appareil-hauteur sont 966px et 909px, respectivement.
Ouais, c'est un de haute résolution de l'appareil de sorte que les pixels sont mis à l'échelle pour maintenir la lisibilité. Sur ma nexus 7, je vois 962px par 553px avec la barre d'état masqué et le système de barre activée.

OriginalL'auteur jpgr | 2012-08-21

  1. 13

    Il y a une différence entre les dimensions de l'écran en pixels CSS et dispositif de pixels.

    Dans le cas de la nexus 7, le natif de l'appareil de pixels, 1280 x 800 pixels.

    Toutefois, si ce est la largeur pour questions des médias, on aurait réactive des conceptions déclenché pour bureau traditionnel tailles.

    En conséquence, de nombreux navigateurs régler le CSS de la taille de pixel qui ressemble de plus près à la taille de la traditionnelle pixels avant de la densité élevée de pixel s'affiche. Assez bien iPhone 1 - 3 taille de pixel.

    Le device-pixel-ratio des rapports (appareil pixels /CSS pixels)

    par exemple 800 /600 = 1.3333

    Pour ajouter encore plus de confusion, ces ratios parfois le changement au sein de l'OS versions. Par exemple, en tant que de Jelly Bean 4.2 ma nexus 7 rapports une largeur de 600px en portrait, en baisse à partir de 603.

    Cela rend difficile la cible exacte des appareils avec une largeur en fonction des requêtes de média. Je recommande l'acceptation de ce que vous êtes en train de concevoir pour un grand nombre de périphériques de la largeur et de la tentative de créer un responsive design qui s'adapte entre la gamme de tailles de périphériques que vous choisissez de soutien.

    Bonne chance 🙂

    OriginalL'auteur Edward

  2. 3

    Utilisation de la fenêtre d'affichage suivantes code:

    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

    ou cette ne permettant pas de mise à l'échelle:

    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />

    Ce qui est curieux au sujet de la Nexus 7, c'est que (comme jpgr posté) il ne vous permettra pas d'utiliser le 1280/800 de l'espace qu'elle possède (hors de la boîte, au moins). C'est presque comme si elle est en cours d'exécution zoomé à un certain degré, en dépit de mise à l'échelle des préférences.

    J'ai remarqué ce problème lors de mes graphiques semble un peu floue. J'ai testé la taille de la fenêtre via javascript et il a été l'affichage des numéros sur 25% plus faible que prévu. Vous remarquerez que j'ai exclure les paramètres de redimensionnement comme il semble l'ignorer, pour la plupart.

    La véritable clé est à l'aide de la target-densitydpi = device-dpi... Ce qui semble faire très droit comme la pluie.

    Aime travailler avec la Nexus 7, c'est sûr!!!

    Juste un mot - cible-densitydpi=device-ppp peut vraiment mess avec 4 pouces de 960 px écrans malheureusement. Vous pouvez vérifier l'appareil avec le javascript et le mettre à jour dynamiquement votre fenêtre d'affichage du contenu avec cette balise, mais c'est une sorte de douleur.
    Je vais avoir ce même problème. Je suis confus mais, ne ces fenêtre d'affichage des paramètres de résoudre le problème?
    La meta viewport code ci-dessus permet de valeurs connues de 1280x800 (comme l'appareil est annoncé) pour être utilisé dans le navigateur. Sans cette fenêtre de code, vous obtenez un écran de taille plus proche de 966px et 909px comme jpgr a déclaré. Robbo mentionné cela peut provoquer des problèmes avec d'autres appareils et je ne parle de la Nexus 7. Les Pixels ne sont pas affichées 1:1, afin de graphiques peuvent devenir un peu floue. Il suffit de garder à l'esprit pour questions des médias, vous devez utiliser les valeurs qui sont affichés dans le navigateur et non pas ce qui est annoncé sur l'appareil.
    Ajouter, à la cible densitydpi n'est plus supporteed sur Chrome pour Android

    OriginalL'auteur Kevin Twitchell

  3. 2

    Trop pragmatique réponse, mais vous pouvez en principe utiliser la taille de l'écran de 601x880 pour cible la Nexus 7. Techniquement pas complète, mais devrait être suffisant pour vous aider à démarrer si vous essayez d'utiliser les points d'arrêt dans votre media queries.

    À l'aide de: (min-device-width : 601px) et (max-device-width : 880px) a fonctionné pour moi merci!

    OriginalL'auteur NICCAI