Comment tester un site Web pour Retina sur Windows sans affichage Retina réel?


85

Existe-t-il un moyen de simuler un écran Retina sur Windows pour tester un site Web pour des écrans HiDPI tels que Retina?

J'exécute Windows sur un moniteur standard de 24 "1920 x 1080. La nuit dernière, j'ai consulté mon site Web sur un tout nouveau MacBook Pro Retina 15" de mes amis et les graphismes semblaient flous (bien pires que sur un MacBook 15 pouces ordinaire), tandis que la police était super net et net, ce qui rend le logo encore pire en raison de la comparaison directe.

J'ai suivi ce tutoriel pour préparer mon site Web Retina:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

J'ai utilisé l'approche retina.js car je n'ai pas d'images d'arrière-plan.

Y a-t-il un moyen pour moi de tester si cela fonctionne réellement? Évidemment, je pourrais demander à mon ami d'utiliser son ordinateur portable Retina, mais ce n'est pas un flux de travail réalisable pour moi. Je veux pouvoir au moins tester approximativement les sites Web pour la compatibilité Retina dans mon propre environnement.


2
Cela

@Jsuar: Malheureusement, ce n'est pas le cas. La bibliothèque JavaScript ne semble pas fonctionner avec retina.js et l'Opéra semble être destiné aux mobiles.
Alexander Rechsteiner

2
Essayez de créer toutes les images telles que votre logo en SVG au lieu de png ou jpg.
Seph

Réponses:


152

about: hack de configuration sur Firefox

Vous pouvez en fait utiliser Firefox:

  1. Aller à "about: config"
  2. Recherchez "layout.css.devPixelsPerPx
  3. Modifiez-le selon le rapport souhaité (1 pour normal, 2 pour rétine, etc. -1 semble être par défaut.)

Capture d'écran:

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! Attention, non seulement le site Web sera désormais multiplié par deux, mais l'interface utilisateur de Firefox sera également doublée. Ce doublement ou ce zoom est nécessaire, car c'est la seule façon dont vous pourrez examiner tous les pixels sur un écran à rapport de pixels standard.

Cela fonctionne bien sur Windows 7 avec Firefox 21.0, et aussi sur Mac OS X avec Firefox 27.0.1.

Si vous n'utilisez pas de requêtes multimédias et d'autres logiques plus avancées (c'est-à-dire que vous fournissez à tout le monde les images HiDPI), vous pouvez simplement zoomer avec votre navigateur à 200%. L'émulation Chrome est un outil utile en plus de lancer les requêtes multimédias, mais comme elle empêche le zoom, vous ne pouvez pas examiner la qualité de l'image.

Zoomer sur Firefox et Edge

Actuellement sur Firefox et Edge, si vous effectuez un zoom, cela 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 un bogue «ne résoudra pas» pour Firefox, donc cela pourrait changer.


2
Tout le monde sait, y a-t-il quelque chose de similaire pour Chrome?
Krzysztof Romanowski

@castus Ne pensez pas, le mieux que vous ayez est de zoomer et je ne pense pas que cela déclenche les requêtes médiatiques.
andrewb

@andrewb: Je me demandais la même chose car cela a renforcé ma réputation (yay!). Peut-être qu'il a été indexé dans Google pour un terme de recherche fréquent.
Alexander Rechsteiner

@AlexanderRechsteiner Il a en fait été lié par la page Facebook de Smashing Magazine et a été partagé sur Facebook par un certain nombre de personnes. Merci d'avoir accepté ma réponse!
andrewb

@ChristinaArasmoBeymer Yep it can
andrewb

25

Dans la version de Google Chrome "33.0.1720.0 Canary", vous pouvez désormais émuler des appareils comme l'iPhone5 et d'autres avec un grand ensemble de paramètres tels que "Device pixel ratio", "android font metrics" et "Viewport emulation" .

Il n'y a plus besoin de ce hack Firefox - difficile à travailler, de toute façon.

Merci à l'équipe de développement de Google! ! :)


1
Je n'ai pas regardé MediaQueries, mais en termes de simple examen de la qualité d'image, je ne vois pas en quoi cela est utile. Vous devez augmenter les pixels X2, sinon vous ne pourrez pas voir visuellement quel contenu est prêt pour Retina et lequel ne l'est pas. J'ai fait un test rapide, et Chrome a juste fait paraître le site google.com petit, mais en allant sur Firefox, j'ai découvert que le Google Doodle à l'époque n'était pas la densité de pixels Retina. Mais bon, si cela fonctionne pour les gens, cela signifie sauter la grande interface utilisateur folle avec la configuration de Firefox!
andrewb

Oui, il ne s'agit pas ici d'augmenter la qualité d'image (c'est impossible, car l'écran physique reste avec la même densité de pixels), mais d'être sûr, en tant que développeur sans Mac Retina, que vous couvrez toujours toutes les bases.
Urb Gim Tam

Si vous souhaitez simplement revoir la qualité de l'image, vous n'avez rien d'autre à faire que d'agrandir votre navigateur à 200%. Si vous souhaitez exécuter des requêtes multimédias dans Chrome, vous devez faire les deux: zoomer et émuler.
Michael McGinnis

@MichaelMcGinnis Je ne parviens pas à émuler et à zoomer avec Chrome, avez-vous pu?
andrewb

Ouais @andrewb, il semble que ce soit des tests séparés. Lorsque je zoom et émule, les images redeviennent petites. Le zoom pendant l'émulation n'affecte pas les tailles d'image.
Michael McGinnis

14

Dans Chrome, vous pouvez le faire en:

1) Ouvrez les outils de développement Chrome et cliquez sur la petite icône "engrenage". entrez la description de l'image ici


2) Choisissez ensuite "Afficher la vue 'Emulation' dans le tiroir de la console." entrez la description de l'image ici


3) Enfin, ouvrez le «tiroir de la console» dans les outils de développement et choisissez Émulation . Réglez l' écran Emuler et réglez le ratio de pixels de l' appareil sur 2,5.

entrez la description de l'image ici


Merci. C'est un peu similaire dans Chrome actuel. Est-ce que 2.5le nombre magique unique pour tous les écrans Retina? Ou a-t-il augmenté / diminué depuis 2014? Edit: Ah, c'est ici
crusy

10

Pour autant que je sache, ce n'est pas possible autrement que d'acheter un appareil Retina.

Quelques solutions de contournement

Moins pertinent


Merci, la puce de developer.apple.com m'a mis sur la bonne voie. Tout comme cette autre réponse ici sur Stack Overflow.
Alex Kendrick le

7

Méthode actuelle d'émulation d'un écran Retina (HiDPI) avec Google Chrome

1) « Faites un clic droit » sur la page Web, puis sélectionnez « Inspecter » pour ouvrir les outils de développement de Chrome

2) Cliquez sur l' icône " Toggle Device Mode "

Cliquez sur l'icône Toggle Device Mode

3) Dans la liste déroulante des appareils en haut de l'écran, sélectionnez « Ordinateur portable avec écran HiDPI »

Sélectionnez un ordinateur portable avec écran HiDPI

4) Vous pouvez maintenant voir à quoi ressemblera le site Web sur un écran Retina aka HiDPI


1

J'utilise une bibliothèque de redimensionnement d'image pour créer dynamiquement des images. Pour la version 2x, j'ajoute un filigrane dynamique lors du débogage - cela permet de voir très facilement si l'image haute résolution est réellement affichée ou non. Je l'ai trouvé très utile.

La façon dont cela fonctionne variera donc sans inclure un exemple de code.


1

Google Chrome version 80

  1. Ouvrez les outils de développement ctrl-shift j
  2. Basculez la barre d'outils de l'appareil en cliquant sur l' icône de la tablette / téléphone en haut à gauche (elle deviendra bleue si vous cliquez dessus)

entrez la description de l'image ici

  1. Maintenant, la fenêtre devrait avoir une barre d'outils au-dessus. Cliquez sur l'icône d'options (3 points) en haut à droite et sélectionnez l' option Ajouter le rapport de pixels de l'appareil .

entrez la description de l'image ici

  1. Vous devriez maintenant voir l'option sur la barre d'outils. De là, vous pouvez passer en 1x, 2x ou 3x.

entrez la description de l'image ici

  1. Lorsque vous testez, assurez-vous d'appuyer sur le bouton d'actualisation chaque fois que vous modifiez le rapport de pixels. Si vous définissez le ratio sur 2x puis le redéfinissez sur une valeur inférieure, vous ne verrez aucun changement car le navigateur ne récupérera pas 1x éléments s'il a déjà récupéré 2x ou plus.

-1

Je ne sais pas si c'est trop simple, j'appuie sur ctrl et je fais défiler et cela déclenche la requête multimédia. Je l'ai vérifié dans bugzilla et cela fonctionne. Je ne suis pas sûr de la mise à l'échelle svg car elle semble floue, mais c'est l'image svg.


Quel navigateur ou quel matériel utilisez-vous? Voulez-vous dire Mozilla au lieu de Bugzilla?
Michael McGinnis

-3

Si vous avez une machine virtuelle mac (ou mac osx), vous pouvez utiliser l'émulateur ios avec xcode. il fait exploser la fenêtre deux fois plus grande, donc ce n'est pas comme ça qu'elle apparaît dans la vraie vie, mais vous montrera clairement si vos images sont floues ou non.


Ouais, et vous pouvez exécuter os x en tant que machine virtuelle dans Windows
filtah

@filtah vraiment pas la pire suggestion
Paul

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.