web-dev-qa-db-fra.com

Comment simuler le ratio de pixels pour tester les requêtes multimédias avec Google Chrome ou Firefox sur Windows?

Bien qu'il soit facile de tester différentes résolutions d'écran dans Google Chrome je me demande comment les développeurs peuvent tester différents ratios de pixels de l'appareil sous-jacents aux requêtes multimédia CSS suivantes.

/* 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 un moyen ou une extension de navigateur pour imiter le ratio de pixels de l'appareil?

csstestingmedia-queries
38
Stephan Ahlf

à propos de: config pirater sur Firefox

Vous pouvez réellement utiliser Firefox:

  1. Allez dans "about: config"
  2. Rechercher "layout.css.devPixelsPerPx
  3. Modifiez-le à votre ratio souhaité (1 pour la normale, 2 pour la rétine, etc.)

Rafraîchissez votre page - boum, votre requête média est maintenant lancée! Chapeau à Firefox pour être génial pour le développement web!

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

Zoom sur Firefox et Edge

Actuellement sur Firefox et Edge, si vous zoomez, il déclenche des requêtes multimédias basées sur dppx. Donc, cette approche plus simple peut être suffisante, mais sachez que la fonctionnalité est signalée comme "ne sera pas corrigée" bug pour Firefox, donc cela pourrait changer.

46
andrewb

Les Chrome DevTools ont une fonctionnalité appelée "Device Mode & Mobile Emulation" disponible en Chrome 32 et supérieur. Il est décrit en détail ici Voici un tutoriel vidéo de la chaîne YouTube DevBytes de Google.

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

Dans les anciennes versions de Chrome, vous devrez peut-être activer la fonctionnalité avant de pouvoir l'utiliser: dans DevTools, cliquez sur l'icône Paramètres (roue dentée), puis cliquez sur "Remplace" et sélectionnez "Afficher la vue" Emulation "dans le tiroir de la console" . Ensuite, cliquez sur l'icône "> =" à gauche de l'icône Paramètres pour afficher le "tiroir de la console" et vous devriez voir un Onglet "Emulation" , où vous pouvez activer l'émulation et modifier les paramètres.

19
rob74

Volker E. a raison en ce sens que les requêtes multimédias de rapport pixel ne seront pas déclenchées.

Il est cependant possible au moins de prévisualiser l'apparence visuelle (lire: mise à l'échelle) des requêtes multimédias pour les appareils de 1,5x, 2x, etc.

Spécifiez simplement la résolution souhaitée dans Chrome Dev Tools, et assurez-vous que "Ajuster à la fenêtre" est sélectionné. Ensuite, redimensionnez la fenêtre de votre navigateur de manière appropriée.

enter image description here

Exemple: pour émuler un Galaxy Nexus en mode paysage, entrez simplement 720x1280 comme dimensions, puis redimensionnez la fenêtre de votre navigateur pour avoir une largeur de 640px. Voila! Vous avez maintenant émulé le rapport 2x pixels de l'appareil.

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

4
derrylwc

derrylwc a une bonne suggestion mais n'a pas inclus d'instructions:

  • Ouvrez les outils de développement (ctrl-shift-i ou command-alt-i)
  • Cliquez sur l'engrenage dans le coin inférieur droit pour les paramètres
  • Choisissez l'onglet "Overrides" (sur le côté gauche)
  • Cliquez sur "Activer" et "Activer au démarrage de DevTools"
  • Cochez "Mesures de l'appareil" et personnalisez. Le "facteur d'échelle de police" semble être le rapport de pixels du périphérique.
1
Garry Boyer