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

Question

J'ai codé une page web destinée à l'affichage rétinien. Je ne dispose pas actuellement d'un écran à affichage rétina.

Existe-t-il une application ou un outil de simulation permettant de tester les pages Web pour l'affichage rétina ?

Ou bien, existe-t-il des moniteurs (pas le MacBook ou l'iPad d'Apple) qui sont similaires à l'écran rétina d'Apple ?

Merci d'avance.

Answer 1

about:config hack sur Firefox

En fait, vous pouvez le faire en utilisant Firefox :

1. Aller à about:config
2. Trouvez layout.css.devPixelsPerPx
3. Modifiez-le en fonction du ratio souhaité (1 pour normal, 2 pour rétine, etc.).

Capture d'écran :

_{(source : <a href="https://farm8.staticflickr.com/7512/26854390370_c7844dde05_z.jpg" rel="nofollow noreferrer">statiqueflickr.com </a>)}

Rafraîchissez votre page - boum, votre requête média est maintenant activée ! Chapeau bas à Firefox qui est génial pour le développement web !

Cette opération a été réalisée sur Windows 7 avec Firefox 21.0.

L'avantage de cette solution est qu'elle déclenchera des requêtes média et d'autres logiques avancées. Si vous ne faites pas cela et que vous vous contentez de fournir à tout le monde les images HiDPI, vous pouvez simplement zoomer avec Chrome, etc. (ou écrire des CSS pour zoomer à votre place, si cela vous convient).

Zoom sur Firefox et Edge

Actuellement, sur Firefox et Edge, si vous effectuez un zoom, cela déclenche des requêtes média basées sur les dppx. Cette approche plus simple pourrait donc suffire, mais sachez que la fonctionnalité est signalée comme étant "non réparable". bogue pour Firefox, donc cela pourrait changer.

Answer 2

Vous pouvez vérifier à l'aide du navigateur Chrome si l'affichage rétina fonctionne ou non, en utilisant ce guide.

1. Ouvrir Chrome Browser y right click puis cliquez sur inspect element
2. Dans la barre inférieure, vous trouverez quelques onglets qui console, search, emulation and rendering
3. Cliquez sur les onglets emulation puis tirez sur l'onglet de la barre comme indiqué ci-dessous.
4. Réglez en fonction du menu sur le left régler l'appareil, l'écran, etc.

Veuillez consulter cet article pour un guide détaillé : http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

Answer 3

Il y a un JavaScript Emulateur Retina Web sur GitHub.

Vous pouvez également utiliser Opera Mobile Emulator pour tester les résolutions personnalisées. Il existe un explication sur la façon de le faire ici .

Si vous disposez d'un ordinateur Apple plus ancien (sans écran rétina), vous pouvez simuler des écrans rétina avec Quartz Debug, un outil intégré à XCode. Toujours dans XCode, vous pouvez tester les appareils iOS dotés d'écrans rétina à l'aide du simulateur iOS.

Answer 4

Vous pouvez ajouter ce css. Tout aura l'air deux fois plus grand, mais cela permet de repérer facilement les problèmes éventuels. L'émulateur Javascript Web Retina n'a pas fonctionné 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 donc Safari/Chrome/Firefox cela fonctionnera, pas sûr pour IE.

Si vous appliquez -webkit-transform : scale(2), les choses paraîtront floues. Vous devez donc utiliser le zoom : 200% ;

Answer 5

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

Ce code seul ne fera pas l'affaire. Si vous utilisez des requêtes média, vous devez modifier le rapport de pixels pour qu'il soit de 1, au lieu de 1,5 ou 2. Sinon, les images ne seront pas remplacées par des images de plus haute résolution.