9 votes

darren102 avatar

Simulation d'un affichage sans rétine

Demandé el 13 de Novembre, 2019
Quand la question a-t-elle été
4182 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Parfois, j'ai besoin de tester mes conceptions (SVG) sur un écran normal, non rétroéclairé, afin de savoir ce que cela donne aux utilisateurs derrière de tels écrans. Ce que je fais normalement, c'est utiliser un vieux portable Windows, mais ce serait pratique si je pouvais le faire rapidement dans mon MacBook rétina.

Comme suggéré aquí J'ai testé le "Ouvrir en basse résolution" option dans Obtenir des informations :

enter image description here

Cependant, il me semble que toute la fenêtre (dans ce cas, Safari) a été floutée, comme si un anticrénelage massif avait été appliqué. Il ne semble pas que seul le PPI ait été réduit.

Ma question est la suivante : existe-t-il un meilleur moyen de simuler un écran non rétina dans mon MacBook rétina, ou est-ce le meilleur que je puisse obtenir ?

Demandé el 13 de Novembre, 2019 par darren102

Réponses

Trop de publicités?

8voto

Derek Pearson avatar
Derek Pearson Points 592

Comme vous êtes un programmeur JavaScript et que vous devez voir vos SVG dans un navigateur, il existe deux solutions possibles. Premièrement, vous pouvez utiliser les outils de développement de chrome pour simuler un écran non HiDPI (Retina Display) dans le navigateur. Ou bien vous pouvez utiliser les outils EasyRes pour modifier rapidement la résolution de l'ensemble de votre écran.

Solution 1

Étapes à suivre pour afficher les sites Web en tant que différents appareils sur Google Chrome :

  1. Ouvrez la page souhaitée dans Google Chrome et activez les outils de développement pour cette page. + + I Step 1 Screenshot

  2. Cliquez sur la barre d'outils de l'appareil située dans le coin supérieur gauche de la fenêtre Dev Tools. + + M Step 2 Screenshot

  3. Cliquez sur le type de périphérique dans la barre d'outils supérieure et cliquez sur modifier pour ajouter un nouveau périphérique à émuler. Step 3 Screenshot

  4. Maintenant, dans votre cas, vous voulez être en mesure d'émuler un écran non rétinien, alors ajoutez "Ordinateur portable avec écran MDPI" à votre liste de périphériques émulés. Si vous voulez émuler n'importe quel autre appareil, ajoutez-le à partir de cette liste. Ou par exemple, si vous voulez émuler un écran rétina, vous choisirez "Laptop with HiDPI screen". Remarque : si vous voulez passer rapidement d'une résolution à l'autre pour comparer, ajoutez également "Ordinateur portable avec écran HiDPI". Step 4 Screenshot

  5. Fermez la fenêtre des dispositifs émulés et cliquez sur le dispositif actuel que chrome est en train d'émuler (sur le côté gauche de la barre d'outils au-dessus de la page web) et changez-le en "Ordinateur portable avec écran MDPI". Step 5 Screenshot

  6. Pour obtenir une meilleure vue de la page Web, désancrez la fenêtre des outils de développement dans une fenêtre séparée en cliquant sur les options du menu (les trois points verticaux sur le côté droit de la fenêtre des outils de développement) et en sélectionnant l'option la plus à gauche pour le "côté Dock". Ou utilisez ce raccourci + + D . Les outils de développement apparaîtront dans une fenêtre distincte, ce qui vous permettra de visualiser la page entière comme si vous naviguiez normalement. Step 6 Screenshot

  7. Votre navigateur devrait alors ressembler à ceci. Vous pouvez également modifier les options de zoom de la page Web émulée dans la barre d'outils pour mieux répondre à vos besoins. Step 7 Screenshot

Solution 2

http://easyresapp.com/

Lien pour télécharger EasyRes depuis le Mac App Store.

Voici également un lien à une démonstration vidéo d'EasyRes

Répondu el 18 de Novembre, 2019 par Derek Pearson (592 Points )

0 votes

Avatar de darren102

Merci pour votre réponse. Oui, j'utilise souvent la barre d'outils Chrome pour appareils, en particulier pour tester les tablettes/mobiles. Cependant, il n'y a pas de différence entre MDPI et HiDPI : Je passe d'un format à l'autre mais, à l'exception de la largeur de la page, l'image est exactement la même, sans aucun changement. Je vais faire quelques recherches supplémentaires pour vérifier quelles sont les capacités réelles de Chrome à émuler MDPI, car pour l'instant je ne vois aucune différence.

Commenté el 19 de Novembre, 2019 par darren102

0 votes

Avatar de Derek Pearson

Il se peut que vous ne remarquiez pas de différence parce que le changement n'est pas si radical. Si ce n'est pas le cas, vous pouvez toujours utiliser l'application pour simuler les différentes résolutions.

Commenté el 19 de Novembre, 2019 par Derek Pearson

2voto

herrbischoff avatar
herrbischoff Points 970

Vous pourriez utiliser Affinity Designer qui dispose de modes permettant de travailler avec des résolutions normales et des écrans HiDPI. Vous pouvez passer de l'un à l'autre de manière transparente. Il montre même l'aliasing qui se produit sur les résolutions normales, ce qui est probablement ce que vous voulez vérifier.

En dehors de cela, vous devrez attacher un écran non-retina à votre Mac et tout y déplacer. C'est ce que font certains designers d'interaction pour vérifier les icônes sur différents écrans. Cependant, si vous avez des appareils spécifiques comme cibles, il est préférable de les utiliser, car les résolutions d'écran et la densité de pixels sont très différentes d'un écran à l'autre et les différents systèmes d'exploitation appliquent également des algorithmes d'anticrénelage différents. Il est généralement préférable d'utiliser les dispositifs matériels/écrans respectifs.

Répondu el 15 de Novembre, 2019 par herrbischoff (970 Points )

0 votes

Avatar de darren102

Merci pour le conseil concernant Affinity. Je ne suis pas entré dans les détails dans ma réponse mais je suis un programmeur JavaScript, mes SVG sont créés dynamiquement et j'ai besoin de les voir dans un navigateur, donc Affinity n'est pas une option (mais merci quand même). Je pense que ma seule option est celle que j'ai maintenant : utiliser un autre ordinateur pour vérifier l'image sur un écran non rétinien.

Commenté el 17 de Novembre, 2019 par darren102

0 votes

Avatar de herrbischoff

Vous ne devez pas nécessairement utiliser un autre ordinateur. Vous pouvez simplement connecter un écran avec une résolution inférieure. MacOS s'occupe du reste. À moins que vous ne souhaitiez tester spécifiquement l'anticrénelage de Windows/Linux.

Commenté el 17 de Novembre, 2019 par herrbischoff

1voto

Guillaume avatar
Guillaume Points 151

Pour compléter la réponse de @derek-pearson, il existe une option permettant d'afficher le "Device Pixel Ratio" lors de l'utilisation d'un appareil "Responsive" :

  1. Basculer le rapport de pixels enter image description here

  2. Désormais, dans la barre supérieure, vous pouvez facilement passer d'un ratio à l'autre. enter image description here

Je l'ai testé en chargeant différentes images pour l'affichage rétina dans le CSS et l'image correcte s'affichait lors du changement (bien que j'aie dû recharger la page).

Répondu el 7 de Octobre, 2022 par Guillaume (151 Points )

Questions en vedette

Top Tags

Dans notre réseau

LesApples.com

LesApples est une communauté de Apple où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres utilisateurs d'appareils Apple, poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X