Comment simuler ratio de pixel pour tester les requêtes de média avec Google Chrome ou Firefox sur Windows?

Alors qu'il est facile de tester différentes résolutions d'écran dans Google Chrome, je me demande comment les développeurs ont pu tester différents pixels de l'équipement ratios sous-jacents suivants CSS media queries.

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header { background: url(headerRatio2.png); background-size: 50%; }

}

Existe-t-il de toute façon ou d'une extension de navigateur pour imiter appareil ratio de pixel?

InformationsquelleAutor Stephan Ahlf | 2013-05-05
  1. 46

    about:config hack sur Firefox

    Vous pouvez réellement utiliser Firefox:

    1. Allez dans "about:config"
    2. Trouver "mise en page.css.devPixelsPerPx
    3. Modifier le ratio désiré (1 pour les normaux, 2 pour la rétine, etc.)

    Actualisez votre page - boom, votre requête des médias a maintenant un coup de pied dans! Coup de chapeau à Firefox pour être aussi génial pour le web développement!

    Cela a été fait sur Windows 7 avec Firefox 21.0.

    Zoom sur Firefox & Bord

    Actuellement sur Firefox et le Bord, si vous effectuez un zoom avant, il déclenche dppx à base de requêtes de média. Donc, cette approche plus facile peut être suffisant, mais il faut être conscient que la fonctionnalité est signalé comme un "ne sera pas résolu" bug pour Firefox, de sorte que cela pourrait changer.

    • Je l'ai essayé dans le s-un.github.io/cri-js. Ce qui est très cool. Merci!
    • est droit, je n'ai pas rencontré cette mise en avant dans son message. Bien que 1 for normal, 2 for retina n'est pas précis. Comme l'origine de bugs bugzilla.mozilla.org/show_bug.cgi?id=394103 et bugzilla.mozilla.org/show_bug.cgi?id=512522 présentation de la valeur 1 valeur par défaut est de 96 dpi(~ ppi). Si vous voulez aller pour un MacBook Pro avec 220 ppi, vous devez entrer 2.29 (220/96) ou pour un iPhone entrée 3.4 (326/96).
    • Cela dépend de ce que vous faites des tests. Ce que vous avez dit est peut-être le droit de physique de l'image taille de l'écran (c'est à dire cmxcm) et peut-être la taille de la police (em). Cependant à savoir si ou de ne pas les media queries sont de déclenchement, je suis tout à fait confiant que le 2 est le bon numéro. Aussi, pour le rendu d'image, 2 sera le bon numéro.
    • Lorsque j'essaie, non seulement la fenêtre de la visionneuse d'augmentation du facteur de zoom" (prévu), mais aussi (1), le chrome (2) toutes les fenêtres, non seulement l'un à l'essai (sorte de prévu, en raison de la nature mondiale de l'environnement) (3) firebug (je devrais probablement avoir attendu celui-là, mais je n'ai pas). Le second signifie que plus la résolution d'affichage (pensez à votre résolution de 600 imprimante, par exemple) peut être affichables, mais ne sont pas debuggable. Il doit y avoir un paramètre qui n'affecte que le <body> contenu d'un onglet et fenêtre.
    • Yep définitivement, c'est hacky, et de l'avoir onglet spécifique serait génial. Malheureusement, je n'ai pas encore trouver quoi que ce soit d'autre qui soit la plus complète de l'émulation. Chrome DevTools est proche, mais il n'a pas de zoom de façon appropriée, de sorte que vous ne pouvez pas examiner la pleine résolution de pixel de sortie.
    • Merci pour le commentaire concernant Chrome DevTools... je vais vérifier quand j'ai eu une chance, mais vous avez cloué le principal fonctionnalité que je cherchais, comme étant manquant, donc vous m'avez sauvé un certain temps.
    • facile et la meilleure façon de firefox. merci

    InformationsquelleAutor andrewb
  2. 19

    Le Chrome DevTools ont une fonctionnalité appelée "Mode de l'Appareil & Mobile Émulation", disponible en Chrome 32 et plus. Elle est décrite en détail ici. Voici un tutoriel vidéo de Google DevBytes chaîne YouTube.

    Ouvrir DevTools en appuyant sur la touche F12 (ou Maj+Ctrl+I /Cmd+Opt+je sur Mac). Dans le courant de Chrome versions, cliquez sur le "smartphone" icône dans le coin supérieur gauche de la DevTools fenêtre pour activer Mobile de l'Émulation. Vous pouvez modifier la plupart des paramètres (type d'appareil, la résolution, le ratio de pixel, l'agent utilisateur...) dans la barre d'outils sur l'émulation de l'écran. Pour plus d'options, cliquez sur "..." sur le côté droit de la barre d'outils.

    Dans les anciennes versions de google Chrome, vous devez activer la fonction avant de l'utiliser: dans les DevTools, cliquez sur le Paramètres icône (la roue dentée), puis cliquez sur "Remplace" et sélectionnez "Show" Émulation "afficher dans la console tiroir". Ensuite, cliquez sur le ">=" icône à gauche de l'icône des Paramètres pour afficher la console tiroir" et vous devriez voir un "Émulation" onglet, où vous pouvez activer l'émulation et de modifier les paramètres.

    • Mon frustrant avec ce, et Safari récente fonctionnalité similaire, c'est que vous ne pouvez pas zoomer suffisamment. Donc, si votre but est d'examiner attentivement les pixels, ça ne va pas être suffisant. Une véritable honte, que l'émulation de la taille de la fenêtre et le toucher est excellent!
    • Même si c'est pratique pour les tests et le développement de vos requêtes de média, il ne sera pas vous montrer ce que le rendu se ressemblent; par exemple un super-légers de la police sera toujours fière allure sur vous êtes en train de visionner sur une haute résolution de l'écran. Tous les web designers doivent avoir une poubelle, écran à portée de la main avec des PC windows connecté pour tester.
    InformationsquelleAutor rob74
  3. 4

    Volker E. est correct dans ce pixel-ratio des requêtes de média ne sera pas déclenchée.

    Il est possible, cependant, au moins pour un aperçu de la aspect visuel (lire: mise à l'échelle) des requêtes de support pour les périphériques qui sont de 1,5 x, 2x, etc.

    Il suffit de spécifier la résolution souhaitée dans Chrome Dev Tools, et vérifiez que l'option "ajuster à la fenêtre" est sélectionné. Ensuite, redimensionner la fenêtre de votre navigateur de manière appropriée.

    Comment simuler ratio de pixel pour tester les requêtes de média avec Google Chrome ou Firefox sur Windows?

    Exemple: pour émuler un Galaxy Nexus en mode paysage, il suffit d'entrer 720x1280 que les dimensions, puis redimensionner la fenêtre de votre navigateur à 640px de large. Voila! Vous avez maintenant émulé l'appareil de 2 pixels.

    (largeur de l'appareil [en pixels]) ÷ (appareil ratio de pixel) = la taille de votre fenêtre doit être

    InformationsquelleAutor derrylwc
  4. 1

    derrylwc a une bonne suggestion, mais ne comprennent pas les instructions:

    • Ouvrir les outils de développement (ctrl-maj-i ou de la commande alt-i)
    • Cliquez sur l'engrenage en bas à droite pour les paramètres
    • Choisir le "Remplacement" de l'onglet (sur la gauche)
    • Cliquez sur "Activer" et "Enable" sur les DevTools de démarrage"
    • Cochez la case "mesures de l'Appareil" et de le personnaliser. "La police facteur d'échelle" semble être l'appareil ratio de pixel.
    InformationsquelleAutor Garry Boyer
  5. -3

    Vous êtes simplement en mesure de tester la requête de média correspondant à l'appareil ratio de pixel sur votre appareil, vous êtes à la recherche au navigateur lors des tests.

    Le dispositif de pixels est un appareil spécifique immuable puisqu'il prend en compte les dispositifs physiques disponibles pixels.
    Voir ppk de la recherche sur la devicePixelRatio

    Donc, c'est essentiellement pas possible d'imiter un autre appareil ratio de pixel que l'appareil est très propre. Vous pouvez encore la fumée de tester votre code f.e. plutôt par la simple application d'un autre support de la règle de requête.

    Prendre soin de min-device-pixel-ratio: 1.5 que de nouveaux HDPi de dispositifs comme la Nexus 7 ont 1.3 ratio de pixel appareil.

    • Merci ! Eh bien, c'est sur la demande il y a code.google.com/p/chromium/issues/detail?id=133590 DevTools des mesures de l'appareil ont besoin d'un moyen de remplacer devicePixelRatio! Vous avez droit je n'ai pas d'autre chance pour le faux requêtes de média. Qui suce 🙂
    • Désolé, mais ce n'est pas vrai, vous pouvez imiter d'autres ratios. Regarde ma réponse.
    InformationsquelleAutor Volker E.