6
votes

Comment les développeurs d'interface graphique traitent-ils des densités de pixels variables?

Les présentoirs d'aujourd'hui ont une gamme assez énorme de taille et de résolution. Par exemple, mon affichage de 34,5 cm × 19,5cm (entraînant une diagonale de 39,6 cm ou 15,6 ") a 1366 × 768 pixels, alors que le MacBook Pro (3ème génération) avec une diagonale de 15" a 2880 × 1800 pixels.

Plusieurs personnes se sont plaintes que tout est trop petit avec des écrans aussi haute résolution (voir Exemple ). C'est simple à expliquer lorsque les développeurs utilisent des pixels pour définir leur interface graphique. Pour "Affichages traditionnels", ce n'est pas un gros problème car les pixels pourraient avoir à peu près la même taille sur la plupart des moniteurs. Mais sur les nouveaux moniteurs avec une densité de pixels beaucoup plus élevée, les pixels sont tout simplement plus petits.

Alors, comment pouvez-vous / si les développeurs d'interface utilisateur peuvent-ils traiter avec ce problème? Est-il possible d'obtenir la taille physique de l'écran? Est-il possible de définir des tailles physiques au lieu des pixels? Est-ce encore un problème (ça fait un moment depuis que je suis en train de lire à ce sujet) ou était-ce que cela a été fixé pendant ce temps?

(tandis que CSS semble prendre en charge CM , lorsque j'essaie ici it, ce n'est pas la taille définie).


3 commentaires

Je ne sais pas si cela importe, mais je suis un utilisateur / développeur Linux uniquement.


Ah, quel environnement? La plupart d'entre eux semblent un peu Messy aujourd'hui, et les informations DPI peuvent même pas être précis en premier lieu. Je hésite un peu à les ajouter à ma réponse depuis que, sans aucune information correcte DPI en premier lieu, aucune de "ne reposant sur la boîte à outils", "s'appuyant sur le système d'exploitation" ou "Traitement du DPI seul" pourrait fonctionner.


@Martheen J'utilise Linux Mint avec l'environnement de bureau Mate.


3 Réponses :


2
votes

Comment les développeurs d'interface utilisateur peuvent-ils traiter avec ce problème?

Utilisez une boîte à outils ou un cadre qui prend en charge Indépendance de résolution . WPF est construit à partir de la terre jusqu'à être indépendante de la résolution, mais même ancien cadre comme Formulaires Windows peut apprendre de nouvelles astuces. OSX / iOS et Windows (ou navigateur si nous parlons de web) peut essayer Pour prendre soin du problème de la mise à l'échelle automatique, mais s'il y a un graphique bitmap impliqué, les développeurs devraient devoir fournir Différents bitmaps tels en Android (qui font face à la résolution la plus variable et aux densités par rapport à d'autres OS)

est-il possible d'obtenir la taille physique de l'écran?

No et les développeurs ne devraient pas s'en soucier. Les développeurs ne doivent se soucier que de la classe de l'appareil (par exemple, une interface utilisateur différente pour tablette et smartphone), et peut-être le DPI de décider quelle ressource bitmap à utiliser. Ressource de vecteur et police doivent être mis à l'échelle par le cadre.

est-ce encore un problème (ça fait un moment depuis que je suis déjà lu à ce sujet) ou était-ce fixé pendant ce temps?

dépend de la lecture de la dernière fois. Le support Windows est toujours remarquable, même pour les applications internes elles-mêmes et, tandis que quiconque se développe dans WPF ou UWP Demandez-vous, ne vous attendez pas à ce que les grandes applications tierces soient bientôt rejoignées. OSX L'écran d'affichage semble fonctionner un peu mieux, tandis que le système d'exploitation mobile moderne s'exécute sur une plage de résolution limitée (iOS et Windows Phone) ou gérer toutes les résolutions imaginables, imaginables assez bien ( Android )


1 commentaires

À propos de la réponse "Non" - Si le développeur connaît le DPI et la résolution, il connaît en fait la taille physique de l'appareil. Au moins la taille que l'utilisateur préfère donner à l'interface graphique, ce que le développeur de l'interface graphique devrait s'en soucier.



0
votes

Il existe quelques façons de traiter différentes tailles d'écran, par exemple lorsque je fais des applications mobiles en Java, je utilisais soit des pixels indépendants de densité; ils restent à une taille fixe) ou que les objets occupent un pourcentage de l'écran. avec des mathématiques simples. En ce qui concerne le développement Web, vous pouvez utiliser VW et VH (ViewPort Width and ViewPort Hauteur), en les ajoutant à la fin d'une valeur à la place de PX, les objets occupent un pourcentage de la fenêtre. Par exemple, 100vh prend 100% de la hauteur de la fenêtre. Ensuite, ce que je pense, c'est la meilleure façon de le faire, mais de consommer du temps, est d'utiliser une bibliothèque comme Bootstrap qui redimensionne automatiquement des éléments, même lorsque la fenêtre est redimensionnée. W3schools a un bon tutoriel sur Bootstrap et des explications plus détaillées sur l'une de ces options peuvent être recherchées avec une recherche Google facile.


0 commentaires

0
votes

La conception de l'interface graphique dans l'affichage d'une époque d'affichage aujourd'hui est un véritable défi. Je suggérerais plusieurs astuces, principalement sur la conception des applications GUI:

  1. Ne jamais définir ou ne vous attendez pas à la taille de pixels constante du texte - L'utilisateur peut le modifier à partir des paramètres système du système d'exploitation. Utilisez des mesures du monde réel pour le texte et vérifiez sa taille de pixel lors du dessin. Fournir un moyen de mettre le texte de taille aléatoire dans les limites de la fenêtre.

  2. Ne jamais définir ou ne vous attendez pas à la taille de pixels constante des widgets d'interface graphique. Essayez de les positionner sur la fenêtre de manière adaptative - en fonction de la taille de la fenêtre. La plupart des outils à outils de Widget Gui ont aujourd'hui de tels instruments.

  3. Ne jamais définir ou n'attendez pas la boîte de dialogue de la taille de pixels constante. Laissez le système d'exploitation choisir la taille de vous, puis utilisez ce que vous obtenez (x). Ou, si vous devez définir une taille et une certaine position (Windows), définissez-le comme pour cent de la taille de l'écran.

  4. Si possible, utilisez des formats d'image évolutifs pour les icônes. SVG est idéal pour les icônes. L'utilisation d'ensembles d'icônes de bitmap avec différentes tailles est acceptable, mais très optimale comme une utilisation de la mémoire et ne fournira toujours pas une échelle parfaite dans la plupart des cas.


0 commentaires