Bildschirm-Eigenschaften

Bildschirm-Einstellung

Zielgruppe sind Informatik-Amateure
Die Beispiele setzen keine Kenntnisse voraus.


Bildschirm- und Fenster-Größe


Auflösung

Die digitale Auflösung bezeichnet in diesem Zusammenhang die Anzahl der Bildpunkte (Pixel) pro Zoll (Dots per Inch, dpi).
In der Informatik werden nur quadratische Pixel verwendet (Breite=Höhe), das gilt allerdings nicht für andere Bereiche (z.B. Fernsehen).

An einem Smartphone ist die Auflösung normalerweise vorgegeben, z.B. 192dpi
An einem PC-Bildschirm ist die Auflösung meistens einstellbar, z.B. 72dpi, 96dpi, 144dpi.



BildschirmPixelcmZoll
Breite0 ??
Höhe0 ??
Diagonale0 ??
Seitenverhältnis0
Auflösung  ??



FensterPixelcmZoll
Breite0 ??
Höhe0 ??


Die Auflösung ist eine besonders wichtige Eigenschaft, denn sie vermittelt zwischen der Größe in Bildpunkten und der real angezeigten Größe. Weitere Kapitel dieser und anderer Seiten haben daher die Auflösung, ihre Messung und die sinnvolle Reaktion darauf zum Thema.

Mess-Balken


Es ist einfach, Objekte (hier: gelbe Balken) einer genau bestimmten Breite und Höhe in Pixeln zu erzeugen. Man kann diese Objekte manuell messen und daraus die Auflösung berechnen.

Alternativ kann man Objekte mit genauen Maßen in cm erzeugen und mit einem Programm die Größe in Pixeln messen. In dieser Version kennt das Programm die Auflösung und kann sinnvoll darauf reagieren.



Berechnung der Auflösung:
dpi = Breite[Pixel] * 2.54 / Breite[cm]

250px

500px

750px



Ein Programm kann die Größe jedes in einer Webseite enthaltenen Objekts messen.
Die Live-Messung der 3 Balken ergab folgende Werte:
cmZollPixelAuflösung
5.01.97" ??
10.03.94" ??
15.05.91" ??

5cm

10cm

15cm



Nachteile:
Man muss sich darauf verlassen, dass der Mess-Balken mit CSS in cm korrekt formatiert wird und dass der jeweilige Browser die zur Messung verwendeten Javascript-Methoden beherrscht.
Das ist zwar meistens der Fall, eine Kontrolle mit der alternativen Methode (Balken in Pixeln formatieren, Breite in cm manuell messen) schadet jedenfalls nicht.



Die Standard-Auflösung von Bildschirmen beträgt 72 dpi oder 96 dpi oder 144 dpi oder 192 dpi.
Wer stärker verkleinert, sollte sich die Adresse eines Augenarztes heraussuchen, solange das Sehvermögen noch dazu ausreicht.

Für Standard-(Amateur)-Drucker gilt eine Auflösung von 300 dpi.
Für den Ausdruck in hoher Qualität kann man je nach Hardware auch 600, 1200 oder 2400 dpi wählen.

Camera-Auflösung


Anzeige am Bildschirm

Das Beispiel-Bild von 2048x1536 Pixel Größe wird auf einem Standard-Bildschirm (96 dpi) in der Größe 21.3x16.0" oder 54.2x40.6cm angezeigt.

Das ist unrealistisch, daher werden alle derartigen Bilder zur Bildschirm-Anzeige stark verkleinert. Die stolzen Besitzer von *MPx-Cameras wissen meist nicht, dass ihre Bilder von typischen Web-Anwendungen automatisch auf ca. 0.05-0.10 MPx verkleinert werden...


Ausdruck

Ein Drucker hat meist eine wesentlich höhere Auflösung als ein Bildschirm. Das gilt insbesondere für professionelle Drucker mit großen Formaten.

Beispiel:
Das Format A3 bezeichnet eine Fläche von 30x42cm = 11.7x16.5"
Dafür verwendet ein Drucker bei 600 dpi Auflösung bereits 7016x9921 Pixel oder 66.4 MPx
Eine hohe Auflösung ist daher (nur) für den Ausdruck sinnvoll - Allerdings nur dann, wenn die optische Qualität mit der Anzahl der Pixel wirklich Schritt hält.

Farbe


Farb-Tiefe

Die Anzahl von Bits pro Pixel wird als Farb-Tiefe bezeichnet. Man kann sie mit einem ↓ Javascript-Programm Live messen:
Farbtiefe0 Bit
Anzahl Farben0


Die meisten Menschen sind nicht in der Lage, so viele Farben voneinander zu unterscheiden. Außerdem ist 'Farbe' subjektiv, d.h. der Eindruck kann sich je nach BeobachterIn unterscheiden - meist nur geringfügig, jedoch manchmal (Fehlsichtigkeit) erheblich.
Die Lichtquellen altern, d.h. die Eigenschaften eines Bildschirms ändern sich mit der Zeit. Bei professioneller Anwendung (Grafik, Druckerei, ...) muss ein Bildschirm periodisch mit relativ großem Aufwand geeicht werden.


Gamma

Diese Grafik stammt von Wikipedia. Damit kann man die Farb-Darstellung eines Bildschirms mit eigenen (visuellen) Mitteln näherungsweise (!) korrekt einstellen.
Betrachten sie die Grafik genau von vorne sowie ohne Zoom in Original-Größe.
Beobachten sie, ob in einer der grauen Flächen ein Buchstabe sichtbar ist.


Wenn die Buchstaben R (Rot), G (Grün) oder B (Blau) sichtbar sind, dann sollten sie die Darstellung verbessern.
Je nach Hardware und Software kann man meist den Gamma-Wert einstellen: Standard ist ein Wert von 2.2


Professionelle AnwenderInnen (Grafik, Druckerei, ...) müssen relativ teure Messgeräte einsetzen. Die genaue Einstellung ist aufwändig und muss wegen der Alterung der Hardware regelmäßig wiederholt werden.


Programmiersprache Javascript


Hier werden ausgewählte Methoden von Javascript vorgestellt. Die Zielgruppe dieses Kapitel sind EntwicklerInnen. Zum Verständnis genügen Grundkenntnisse von Javascript.



var screen_width = screen.width;
var screen_height = screen.height;



var window_width = window.innerWidth;
var window_height = window.innerHeight;


Darauf kann man in Javascript mit einem Event-handler-Programm für das onresize-Ereignis reagieren oder in CSS mit → Bedingten Regeln



HTML
<div id="balken" style="width:5cm;"></div>

Javascript:
n = document.getElementById('balken');
rect = n.getBoundingClientRect();
x=rect.left; y=rect.top;
w=rect.right-x; h=rect.bottom-y;
dpi = w * 2.54 / 5;



var color_depth = screen.colorDepth;
var color_count = Math.pow(2,color_depth);



CSS


Beispiel von CSS MediaQuery
body{background-color:yellow; padding:1em;}
@media screen and (max-width:300px) {
body{padding:0;}
}

Zuerst wird eine allgemeine Regel aufgestellt, z.B.:
Das <body>-Element erhält einen gelben Hintergrund und einen Innenrand (padding).
Danach wird die Bedingung formuliert: Nur wenn das Medium der Bildschirm (screen) ist und nur wenn dessen Breite <=300px ist, werden die vorher programmierten Regeln ergänzt und geändert.
Die bedingte Regel (z.B. für ein Smartphone) formatiert das <body>-Element ohne Rand. Die Farbe des Hintergrunds wird nicht geändert und bleibt daher Gelb.