web-dev-qa-db-fra.com

Comment tester une page Web destinée à l'affichage Retina?

J'ai codé une page Web destinée à l'affichage de la rétine. Je n'ai actuellement pas de moniteur d'affichage de la rétine.

Existe-t-il une application ou un outil de simulation permettant de tester l'affichage de la rétine sur des pages Web?

Ou existe-t-il des écrans (autres que le MacBook ou l'iPad d'Apple) similaires à l'écran Retina d'Apple?

Merci d'avance.

webpageretina-display
67
Sangam254

à propos de: config hack sur Firefox

Vous pouvez réellement utiliser Firefox:

  1. Aller à about:config
  2. Trouver layout.css.devPixelsPerPx
  3. Changez-le au ratio souhaité (1 pour la normale, 2 pour la rétine, etc.)

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!

Cela a été fait sur Windows 7 avec Firefox 21.0.

L’avantage de cette solution est qu’elle déclenchera des requêtes sur les médias et une autre logique avancée. Si vous ne le faites pas et que vous alimentez simplement tout le monde avec les images HiDPI, vous pouvez simplement zoomer avec Chrome etc. (ou écrire du code CSS pour zoomer pour vous, si cela fait flotter votre bateau). ).

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 facile peut suffire, mais sachez que la fonctionnalité est signalée comme "ne résoudra pas" bug pour Firefox, cela pourrait donc changer.

106
andrewb

Vous pouvez vérifier avec le Chrome Navigateur pour tester l’affichage de la rétine, que ce soit fonctionnel ou non, utilisez ce guide

  1. Ouvrez Chrome Browser Et right click Puis cliquez sur inspect element
  2. Dans la barre du bas, vous trouverez des onglets que console, search, emulation and rendering
  3. Cliquez sur les onglets emulation, puis tirez sur l'onglet à barres comme indiqué ci-dessous
  4. Ajustez en fonction du menu sur le left, ajustez le périphérique, l'écran, etc.

Veuillez consulter cet article pour obtenir des informations plus détaillées: http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

20
Gee

Il existe un JavaScript émulateur Web Retina sur GitHub.

Vous pouvez également utiliser Opera Mobile Emulator pour tester les résolutions personnalisées. Il existe un explication de la procédure à suivre ici .

Si vous possédez un ordinateur plus ancien Apple (sans écran Retina)), vous pouvez simuler des affichages Retina avec Quartz Debug, un outil intégré à XCode. Simulateur iOS.

4
Nelu

Vous pouvez ajouter ce css. Tout aura l'air deux fois plus gros, mais il est facile de détecter les problèmes éventuels. L'émulateur Javascript Web Retina ne fonctionne pas pour moi (flou dans Safari)

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-Origin: 0 0;
}

Le zoom: 200% s’applique à webkit, -moz pour firefox afin que Safari/Chrome/Firefox fonctionne, mais vous ne savez pas exactement si IE.

Si vous appliquez -webkit-transform: scale (2), le zoom semblera flou. Vous devez donc utiliser le zoom: 200%;

4
placeboaddict
body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-Origin: 0 0;
}

Ce code à lui seul ne fera pas l'affaire. Si vous utilisez des requêtes multimédia, vous devez passer le rapport de pixels à 1, au lieu de 1,5 ou 2, pour que le problème soit résolu. Sinon, les images ne passeront pas aux images à résolution supérieure.

0
Daniel Dogeanu