it-swarm-eu.dev

DPI-unabhängige Benutzeroberfläche für Webseiten

Fast ein Jahrzehnt lang, bevor LCD zur Norm wurde), hatten Bildschirme 72 oder 96 DPI (normalerweise nur auf Trinitron-Displays zu finden). Heute sind jedoch 120 und 144 DPI-Displays weit verbreitet.

Mit der Einführung von Windows 7 werden DPI-Probleme für Desktop-Apps mehr oder weniger bis zu einem gewissen Grad behoben, und zumindest die Benutzeroberfläche von Betriebssystemen wird auf einem Display mit hoher DPI nie beschädigt.

Jetzt kommen wir zu Webseiten - ich hatte einen großen Streit mit einem Freund über das Erstellen einer DPI-unabhängigen Webseite - Meiner Ansicht nach sollten UI-Elemente auf verschiedenen Systemen gleich groß sein und jede CSS-Dimension sollte in Zoll statt in Pixel angegeben werden .

Ich habe dieses Thema auf SO) angesprochen und es gab allgemeine Missbilligung über die Verwendung von Zoll als Einheiten, was ich ziemlich vernünftig finde.

Ich habe einen 144-DPI-Bildschirm mit einer Größe von nur 15,4 Zoll - Die Größe der einzelnen Pixel ist so klein, dass Text-Antialiasing und Subpixel-Rendering sehr effektiv sind, aber ich sehe viele Webseiten, die davon ausgehen, dass eine 8-Punkt-Schrift groß genug ist, um auf jeder zu lesen System.

Ich glaube, dass dies ein großer Ärger und ein grundlegender Fehler im UI-Design ist ... Annahmen über die Benutzerumgebung treffen, wenn Sie sich tatsächlich an die vorhandene anpassen können.

Es unterscheidet sich nicht sehr von den frühen Webseiten in den 2000er Jahren, die auf 1280x1024 nicht richtig angezeigt wurden, da sie für 1024x768 entwickelt wurden

Eine weitere Ironie ist, dass nur Firefox ein 1-Zoll-Element als 1-Zoll-Element darstellt - alle anderen Browser sind deaktiviert, es sei denn, Ihr Bildschirm-DPI-Wert ist 96 Offensichtlich ist irgendwo im Code der Wert 96 fest codiert - Wie schwierig ist es, diesen durch einen GetScreenDPI zu ersetzen ( ) oder welcher API-Aufruf?

Was sind deine Ansichten?

6
rep_movsd

Pixel sind ein Konzept auf Hardware-Ebene, und da mehr Pixel auf weniger Platz verteilt werden, müssen Designer lernen, eine andere Maßeinheit zu verwenden. Wenn ich eine Schaltfläche mit 100 × 200 Pixel entwerfe, weil ich von einem 100-dpi-Bildschirm ausgehe, leidet ein Benutzer auf einem 200-dpi-Bildschirm, da die Schaltfläche ¼ der Fläche hat.

Da immer mehr Geräte mit Bildschirmen mit hoher Pixeldichte ausgeliefert werden, haben Designer tatsächlich mehr Kontrolle (und Flexibilität), wenn sie die technischen Aspekte der Systeme kennen, für die sie entwerfen.

Das Festlegen von Weblayouts in Punkten ist beispielsweise zukunftssicherer, da Sie die physische Größe angeben (mit Ausnahme der von Ihnen erwähnten Implementierungsfehler).

Als weiteres Beispiel werden Bildschirmkoordinaten in iOS-Geräten in Punkten gemessen, und für ältere Geräte ohne den neuen Bildschirm mit hoher Dichte gab es eine Eins-zu-Eins-Zuordnung von Punkten zu Pixeln. Das iPhone 4 verdoppelt die Anzahl der Pixel, behält jedoch die Punktgröße des Bildschirms bei (so dass alte Layouts weiterhin funktionieren, neue Layouts jedoch Bruchmaße für eine höhere Positionsgenauigkeit verwenden können).

5
Brendan Berg

Ich denke, es ist besser, Prozent für das UI-Design zu verwenden. Dann können Sie absolute Werte in das Body-Tag einfügen. Ändern Sie die absoluten Körperwerte überall mit Javascript. dann haben Sie alles andere OK.

Versuchen Sie für den Javascript-Teil, die Benutzeranzeige zu erkennen und Werte zu berechnen. es ist einfach.

1
Morteza Milani

Warum Zoll verwenden, wenn sowohl Grafiken als auch Bildschirmgrößen in Pixel gemessen werden? Unterschiedliche Auflösungen zeigen unterschiedliche Pixelzahlen pro Zoll an. Wenn wir also die Ränder, Auffüllungen, Schriftgrößen (besser px oder em als pt) usw. in Zoll messen, ist es schwieriger herauszufinden, wie groß unsere Bilder sind (welche sind) Pixel für Pixel gemacht) wäre auf der Seite. Ganz zu schweigen davon, dass die Auflösung von 800 x 600 immer 800 x 600 Pixel beträgt nabhängig davon wie viele Zoll der Bildschirm hat.

Ein Teil davon, ein Webentwicklungs-/Designprofi (oder Guru) zu werden, besteht darin, zu lernen, wie Sie Ihre Website effektiv erstellen, damit so viele Benutzer wie möglich darauf zugreifen können. Und die dafür erforderlichen Techniken werden weit verbreitet und akzeptiert. Mein Punkt ist, wenn der Entwickler dort arbeitet, sollte es kein Problem sein. Und das ist einer der Gründe, warum diese Seite existiert.

1
LoganGoesPlaces

einheitskonsistenz; echte Zoll. (72 Punkte ergeben einen Zoll)

8-Punkt-Schrift Ich liebe Liberation Mono bei 8 pt, aber das liegt nur daran, dass es bei einer so geringen Größe so gut aussieht - für mich sehen einige Schriften nur seltsam aus, wenn man ihre Details sieht, aber sie sehen gut aus

1280 x 1024 (5: 4) und 1024 x 768 (4: 3); Sie könnten gut vom kleineren zum größeren skalieren, aber Sie müssten den größeren Bildschirm drehen, und wenn diese Bildschirme dieselbe Größe hätten, würde ein Zoll-Layout unverändert funktionieren, aber es gibt immer noch zwei Probleme: ein Layout für einen Bildschirm von unbekannte Größe und die richtige Schriftgröße

sie können eine Seite an die Auflösung Ihres Bildschirms anpassen, aber nicht an die Größe und Form des Bildschirms

ich habe mupdf (einen PDF-Viewer) so geändert, dass es standardmäßig die tatsächliche Größe hat, da der Server unter x11 die tatsächliche Größe des Bildschirms und die von xdpyinfo für meinen Bildschirm gemeldete Auflösung wie folgt angibt:

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

(Wenn Sie jedoch die Abmessungen des Arbeitsbereichs möchten, müssen Sie eine Eigenschaft lesen, die im Extended Window Manager definiert ist. Hinweise: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)

aber ich fand, dass der Bildschirm zu kurz war und das bedeutete, dass man in PDF-Seiten scrollen musste - ich mag eher ausgelagerte Medien, aber man sollte niemals Paging und Scrollen mischen

und dann dachte ich darüber nach, einen Bildschirm zu bekommen, der nicht kürzer als eine Buchstabenseite ist, wie zum Beispiel ein Porträtmodus mit 21,5 Zoll LCD (aber es ist schwierig, einen LCD dieser Größe im Bereich von 108+ dpi für nicht mehr als 250 zu finden uns)

1
Dan D.