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.
about: bidouille de configuration sur Firefox
Vous pouvez réellement utiliser Firefox:
- Allez à "about: config"
- Trouver "layout.css.devPixelsPerPx
- 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.
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! ! :)
En 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 Emulation. Définissez l’écran Emulate et réglez le ratio pixels du périphérique sur 2,5.
Autant que je sache, il n’est pas possible d’acheter un appareil pour la rétine.
Quelques solutions de contournement
Si vous doublez la taille et les proportions de l’image sont toujours les mêmes, vous êtes quasiment en sécurité. Si vous n’avez pas d’écran Retina à tester avec, passer de la requête multimédia en pixels à quelque chose basé 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 rétinien
http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/WordPress Retina Images
http://wpmu.org/wordpress-retina/
Moins pertinent
Comment concevoir des écrans Retina d’Apple
http://www.studiopress.com/design/retina-display-design.htmCré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-pixelsComment développer un site Web pour l'affichage de la rétine?
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".
3) Dans la liste déroulante Périphérique 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, également appelé HiDPI
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.