web-dev-qa-db-fra.com

Interface utilisateur indépendante DPI pour les pages Web

Pendant près d'une décennie, avant LCD est devenu la norme, les écrans étaient à 72 ou 96 DPI (généralement trouvés uniquement sur les écrans Trinitron). Cependant, les écrans 120 et 144 DPI sont maintenant assez courants.

Avec l'arrivée de Windows 7, les problèmes DPI sont plus ou moins résolus dans une certaine mesure pour les applications de bureau, et au moins l'interface utilisateur du système d'exploitation n'est jamais rompue sur un écran à haute résolution.

Maintenant, nous arrivons aux pages Web - J'ai eu un énorme argument avec un ami au sujet de la création d'une page Web indépendante DPI - Mon point de vue était que les éléments d'interface utilisateur devraient avoir la même taille sur différents systèmes, et que chaque dimension CSS devrait être spécifiée en pouces plutôt qu'en pixels. .

J'ai soulevé ce sujet sur SO et il y avait une désapprobation générale à propos de l'utilisation des pouces comme unités, ce que je trouve plutôt -uh- non raisonnable.

J'ai un écran de 144 DPI de seulement 15,4 pouces - La taille des pixels individuels est si petite que l'anti-crénelage du texte et le rendu des sous-pixels sont vraiment efficaces, mais je vois beaucoup de pages Web qui supposent qu'une police à 8 points est assez grande pour être lue sur n'importe quel système.

Je crois que c'est une énorme gêne et une faille fondamentale dans la conception de l'interface utilisateur ... Faire des hypothèses sur l'environnement des utilisateurs lorsque vous pouvez réellement vous adapter à celui existant.

Ce n'est pas très différent des premières pages Web des années 2000 qui ne s'afficheraient pas correctement sur 1280x1024 car elles ont été conçues pour 1024x768

Une autre ironie est que seul Firefox rend un élément de 1 pouce en 1 pouce physique - tous les autres navigateurs sont désactivés à moins que votre écran DPI ne soit 96.Videmment, quelque part dans le code est la valeur 96 en dur - À quel point est-il difficile de remplacer cela par un GetScreenDPI ( ) ou quel que soit l'appel d'API?

Quelle est votre opinion?

6
rep_movsd

Les pixels sont un concept au niveau matériel, et comme plus de pixels sont entassés dans moins d'espace, les concepteurs vont devoir apprendre à utiliser une unité de mesure différente. Si je conçois un bouton de 100 × 200 pixels, car je suppose un écran de 100 dpi, un utilisateur sur un écran de 200 dpi en souffrira car le bouton aura 1/4 de surface.

Comme de plus en plus d'appareils sont livrés avec des écrans à haute densité de pixels, les concepteurs auront en fait plus de contrôle (et de flexibilité) s'ils connaissent les aspects techniques des systèmes pour lesquels ils conçoivent.

Par exemple, la spécification de mises en page Web en points est plus pérenne car vous spécifiez la taille physique (sauf les bogues d'implémentation que vous avez mentionnés).

Comme autre exemple, les coordonnées d'écran dans les appareils iOS sont mesurées en points, et pour les appareils plus anciens sans le nouvel écran haute densité, il y avait un mappage un à un des points aux pixels. L'iPhone 4 double le nombre de pixels, mais conserve les dimensions en points de l'écran (les anciennes dispositions continueront donc de fonctionner, mais les nouvelles dispositions peuvent utiliser des dimensions fractionnaires pour une précision de positionnement plus élevée.)

5
Brendan Berg

Je pense qu'il est préférable d'utiliser le pourcentage pour la conception de l'interface utilisateur. Ensuite, vous pouvez mettre des valeurs absolues dans la balise body. Modifiez les valeurs absolues du corps partout où vous le souhaitez à l'aide de javascript. alors vous aurez tout le reste OK.

Pour la partie javascript, essayez de reconnaître l'affichage utilisateur et de calculer les valeurs. c'est facile.

1
Morteza Milani

Pourquoi utiliser les pouces lorsque les graphiques et les tailles d'écran sont mesurés en pixels? Différentes résolutions affichent différents nombres de pixels par pouce, donc si nous mesurons en pouces les marges, le remplissage, les tailles de police (mieux utiliser px ou em que pt), etc. il serait plus difficile de déterminer la taille de nos images (qui sont pixel par pixel) serait sur la page. Sans oublier que la résolution 800x600 est toujours 800px x 600px peu importe du nombre de pouces de l'écran.

Pour devenir un professionnel du développement/design web (ou gourou), apprendre à construire efficacement votre site afin que le plus grand nombre possible d'utilisateurs y accèdent. Et les techniques requises pour le faire se répandent et sont acceptées. Mon point étant que si le développeur fait son travail, cela ne devrait pas être un problème. Et c'est l'une des raisons pour lesquelles ce site existe.

1
LoganGoesPlaces

cohérence des unités; vrais pouces. (72 points font un pouce)

Police à 8 points J'adore la libération mono à 8 pt, mais c'est uniquement parce qu'elle a l'air si bien ajustée à une si petite taille - pour moi, certaines polices ont l'air étranges quand vous voyez leurs détails mais elles ont l'air bien ajustées

1280x1024 (5: 4) et 1024x768 (4: 3); vous pouvez faire une mise à l'échelle fine du plus petit au plus grand, mais vous devrez faire pivoter le plus grand écran et si ces écrans étaient de la même taille, une disposition en pouces fonctionnerait sans changement, mais il y a toujours deux problèmes: l'un pose du texte pour un écran de taille inconnue et obtenir la bonne taille de police

vous pouvez rendre une page invariante à la résolution de votre écran, mais vous ne pouvez pas la rendre invariante à la taille et à la forme de l'écran

j'ai modifié mupdf (une visionneuse pdf) par défaut à sa taille réelle car sous x11 le serveur fournit la taille réelle de l'écran et sa résolution rapportée pour mon écran par xdpyinfo comme:

dimensions:    1280x800 pixels (301x192 millimeters)
resolution:    108x106 dots per inch

(bien que si vous voulez les dimensions de la zone de travail, vous devez lire une propriété définie par les conseils du gestionnaire de fenêtres étendues: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)

mais j'ai trouvé que l'écran était trop court et cela signifiait que vous deviez faire défiler les pages pdf - j'aime plutôt les médias paginés mais il ne faut jamais mélanger la pagination et le défilement

puis j'ai pensé à obtenir un écran qui n'est pas plus court qu'une page de lettre comme un écran LCD en mode portrait 21,5 pouces (mais il est difficile de trouver un écran LCD de cette taille dans la plage de 108+ dpi pour pas plus de 250 nous)

1
Dan D.