web-dev-qa-db-fra.com

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

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

Je lance Windows sur un moniteur standard 24 "1920x1080. La nuit dernière, j’ai visité mon site Web avec un nouveau MacBook Pro Retina de 15" et les graphismes étaient flous (bien pire que sur un MacBook classique 15 pouces), alors que la police très net et précis, ce qui rend le logo encore pire en raison de la comparaison directe.

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

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

J'ai utilisé l'approche retina.js puisque je n'ai aucune image de fond.

Existe-t-il un moyen pour moi de vérifier si cela fonctionne réellement? Évidemment, je pourrais demander à mon ami d’utiliser son ordinateur portable Retina, mais cela ne me convient pas. Je veux pouvoir au moins tester approximativement la compatibilité de Retina sur des sites Web dans mon propre environnement.

78

about: bidouille de configuration sur Firefox

Vous pouvez réellement utiliser Firefox:

  1. Allez à "about: config"
  2. Trouver "layout.css.devPixelsPerPx
  3. Changez-le au ratio souhaité (1 pour la normale, 2 pour la rétine, etc. -1 semble être le paramètre par défaut.)

Capture d'écran:

Rafraîchissez votre page - boum, votre requête média a maintenant commencé! Chapeau à Firefox pour avoir été génial pour le développement web! Attention, non seulement le site Web sera doublé, mais l'interface utilisateur de Firefox sera également doublée. Ce double ou zoom est nécessaire, car c’est le seul moyen d’examiner tous les pixels sur un écran au format standard.

Cela fonctionne très bien sous Windows 7 avec Firefox 21.0, ainsi que sous Mac OS X avec Firefox 27.0.1.

Si vous n’utilisez pas de requêtes multimédia ni d’autres méthodes plus avancées (par exemple, vous fournissez à tout le monde les images HiDPI), vous pouvez effectuer un zoom avant à 200% avec votre navigateur. L'émulation Chrome est un outil utile, car elle empêche les requêtes multimédias, mais ne permet pas de zoomer, vous ne pouvez pas examiner la qualité de l'image.

Zoom sur Firefox et Edge

Actuellement sur Firefox et Edge, si vous effectuez un zoom dessus, des requêtes multimédia basées sur dppx sont déclenchées. Donc, cette approche plus simple peut suffire, mais sachez que la fonctionnalité est signalée comme "ne résoudra pas" bug pour Firefox, cela pourrait donc changer.

148
andrewb

Dans la version "33.0.1720.0 Canary" de Google Chrome, vous pouvez maintenant émuler des appareils tels que iPhone5 et autres avec un ensemble de paramètres tels que "Rapport de pixels de l'appareil", "Indicateurs de police Android" et "Émulation de Viewport" .

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

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

24
Urb Gim Tam

En chrome, vous pouvez le faire en:

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


2) Choisissez ensuite "Afficher la vue" Emulation "dans le tiroir de la console." enter image description here


3) Enfin, ouvrez le "tiroir de la console" dans les outils de développement et choisissez Emulation. Définissez l’écran Emulate et réglez le ratio pixels du périphérique sur 2,5.

enter image description here

14
thegreyspot

Autant que je sache, il n’est pas possible d’acheter un appareil pour la rétine.

Quelques solutions de contournement

Moins pertinent

10
JSuar

Méthode actuelle pour émuler un écran Retina (HiDPI) avec Google Chrome

1) "Cliquez avec le bouton droit sur" sur la page Web, puis sélectionnez "Inspecter" pour ouvrir les outils de développement de Chrome.

2) Cliquez sur l'icône "Basculer en mode périphérique".

 Click the Toggle Device Mode Icon

3) Dans la liste déroulante Périphérique en haut de l'écran, sélectionnez "Ordinateur portable avec écran HiDPI".

 Select Laptop with HiDPI Screen

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

7
user280109

J'utilise une bibliothèque de redimensionnement d'images pour créer des images de manière dynamique. 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 le code exemple. 

0
Simon_Weaver