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

Question

Est-il un moyen de simuler un affichage de la Rétine sur Windows pour tester un site web pour HiDPI affiche comme la Rétine?

- Je exécuter Windows sur un 24" en 1920x1080 à surveiller. La nuit dernière j'ai vérifié mon site web sur un des amis de la marque nouvelle 15" Retina MacBook Pro et les graphismes regardé toutes floues (bien pire que sur un régulier de 15 pouces, MacBook), tandis que la police a été super clair et net, en faisant le logo apparaîtra encore pire en raison de la comparaison directe.

J'ai suivi ce tutoriel pour faire mon site web Retina ready:

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

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

Est-il possible pour moi de tester si cela fonctionne réellement? Évidemment, je pourrais demander à mon ami de l'utilisation de sa Rétine Portable mais qui n'est pas faisable de flux de travail pour moi. Je veux être en mesure d'au moins tester les sites web de la Rétine de compatibilité dans mon propre environnement.

Answer 1

En fait vous pouvez à l'aide de Firefox:

1. Allez dans "about:config"
2. Trouver "mise en page.css.devPixelsPerPx
3. Modifier le ratio désiré (1 pour les normaux, 2 pour la rétine, etc. -1 semble être par Défaut.)

Actualisez votre page - boom, votre requête des médias a maintenant un coup de pied dans! Coup de chapeau à Firefox pour être aussi génial pour le web développement! Heads up, non seulement le site web maintenant être augmentée à deux fois la taille, celle de Firefox INTERFACE utilisateur sera également doublé. Il a également des coups de pied dans les media queries. Ce doublement ou le zoom est nécessaire, comme c'est la seule façon vous serez en mesure d'examiner tous les pixels sur un ratio de pixel de l'écran.

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

Si vous n'êtes pas à l'aide de requêtes de média et d'autres plus avancées de la logique (c'est à dire que vous êtes nourrir tout le monde le HiDPI images), vous pouvez zoomer avec votre navigateur à 200%. Le Chrome, l'émulation est un outil utile aussi bien qu'il coups de pied dans les requêtes des médias, mais parce qu'il empêche le zoom, vous ne pouvez pas examiner la qualité de l'image.

Answer 2

Dans la version "33.0.1720.0 Canary" de Google Chrome, vous pouvez désormais é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! ! :)

Answer 3

Dans chrome, vous pouvez le faire par:

1) Ouvrir les Outils de développement Chrome et cliquez sur le petit "équipement" de l'icône.

---

2) Ensuite, choisissez "Show" Émulation " afficher dans la console tiroir."

---

3) Enfin, ouvrir la console tiroir" dans les Outils de développement, et de choisir l'Émulation. Ensemble Émuler l'écran et réglez l' Appareil Pixel Ratio de 2,5.

Answer 4

Aussi loin que je peux dire, c'est pas possible, d'autres que l'achat de la rétine périphérique.

Quelques Solutions De Contournement

• Proposé ici:

  • Si vous doublé jusqu'à la taille d'une image et les proportions sont toujours les mêmes, vous êtes à peu près sûr. Si vous ne disposez pas d'un écran retina pour tester avec, passer du pixel-ratio de la requête de média pour quelque chose largeur de la base.

  • Le test et le Dépannage de Contenus Haute Résolution
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

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

• WordPress Images De La Rétine
  http://wpmu.org/wordpress-retina/

Moins Pertinentes

• Comment Créer un Sensible, de la Rétine-prêt Site web

• Comment Concevoir pour les Écrans Retina d'Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Construction 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 obtenir de la rétine-prêt?

Answer 5

Si vous avez un mac (ou une machine virtuelle mac osx), vous pouvez utiliser l'émulateur ios avec xcode. il fait sauter la fenêtre deux fois plus grande, donc ce n’est pas son apparence réelle, mais il vous indiquera clairement si vos images sont floues ou non.