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

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.

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.

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! ! :)

Dans Chrome, vous pouvez le faire en:

1) Ouvrez les outils de développement Chrome et cliquez sur la petite icône "engrenage".

2) Choisissez ensuite "Afficher la vue 'Emulation' dans le tiroir de la console."

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.

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

Quelques solutions de contournement

• Suggéré ici:

  • Si vous avez doublé les tailles d'image et que les proportions sont toujours les mêmes, vous êtes à peu près en sécurité. Si vous ne disposez pas d'un écran Retina pour tester, passez de la requête multimédia au rapport de pixels à une requête basée sur la largeur.

  • Test et dépannage du contenu haute résolution
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Comment développer pour HiDPI («Retina») sans MacBook Pro Retina
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• Images WordPress Retina
  http://wpmu.org/wordpress-retina/

Moins pertinent

• Comment créer un site Web réactif et prêt pour la rétine

• Comment concevoir des écrans Retina d'Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Création de sites Web pour les écrans Retina: se faire des amis avec des pixels
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Comment développer un site Web pour l'affichage de la rétine?

• comment préparer la rétine?

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 "

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

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

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.

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)

3. 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 .

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

5. 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.

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.

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.