CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 21.08.2019
     
Darstellungsproblem Win - Mac

Websites können auf verschiedenen Plattformen auch unterschiedlich dargestellt erscheinen. Dies wird immer häufiger bei Macintosh und Linuxrechnern zum Problem, da diese Schriften kleiner darstellen.

Das Problem hierbei liegt darin, dass die verschiedenen Plattformen die Bildschirmauflösung unterschiedlich berechnen. Während Windows mit 96 Bildpunkten pro Zoll ("dpi" = Dots per Inch) rechnet, liegt dieser Wert bei Macintoshsystemen und Linuxrechnern bei 72 dpi. Sollte nun eine Formatierung in Bildpunkten angegeben sein, so hat dies zur Folge, dass Windows die Schrift größer darstellt, als es das Macsystem tut.

In der Praxis hat dies fatale Auswirkungen: Da die Schriftgrößen sehr häufig in Punkten (pt) angegeben werden, hat dies zur Folge, dass diese auf dem Windowsrechner rund
96/72 also rund 1,33 (~133%) mal so groß dargestellt wird, als auf dem Mac. umgekehrt erscheint eine Formatierung in Pixeln auf dem Mac nur 72/96=0,75 also nur rund 75 Prozent so groß, wie die entsprechende Windowsdarstellung).

Lösungsansätze:

Die wohl einfachste Lösungsmöglichkeit bestünde darin, dass man auf die Formatierung mittels Bildpunkten strikt verzichtet und dafür die Größenangabe in Pixel verwendet, denn die Angabe in Pixeln erscheint auf jedem System genau gleich.
Problem: Durch die Angabe in Pixel wird dem Besucher die Möglichkeit verwehrt die Schriftgröße alternativ umzustellen (z.B. IE: Ansicht -> Schriftgrad), da diese Angabe absolut ist. Besonders bei sehbehinderten Besuchern würde die daraus resultierende Folge sein, dass sie ein ihren Einschränkungen entsprechendes Onlineangebot wählen.

Eine weitaus effektivere und besucherfreundlichere Möglichkeit besteht in der Verwendung von relativen Maßeinheiten. Bei einer Formatierung mittels CSS ist die Verwendung der Einheit em oder die Angabe in Prozent durchaus sinnvoll, wobei das W3C die Verwendung von em empfiehlt. Der Vorteil besteht darin, dass diese Angaben relativ sind, und die Schriftgröße somit zu einem gewissen Grade verändert werden kann. 1 Em gibt die Standardgröße des Browsers an. Wird gewünscht, dass die Schrift größer als die Standardgröße des Browsers angegeben wird, so wird ein gewünschter Wert größer 1 gesetzt, soll Sie kleiner dargestellt werden, so wird ein Wert kleiner 1 gesetzt.
Ähnlich verhält es sich mit der Angabe in Prozent (größer als Standard: größer 100% kleinere Größe: kleiner als 100%).
In der Praxis werden hierbei zwei externe CSS Dateien erstellt: Die eine für Windows optimiert, die andere für Macs bzw. Linux. Die Formatierungen in der CSS Datei für den Mac müssen hierbei um 33 Prozent größer sein, als diejenigen von der Windows Datei (Rechnung siehe oben).

Beispiel:

Windows.css
p {font-size: 1em;}
h1 {font-size: 2em;}

Mac.css
p {font-size: 1.3em;}
h1 {font-size: 2.66em;}

Nun muss ist es noch notwendig die jeweiligen Besucher mit den unterschiedlichen Plattformen auch die etwaigen entsprechenden CSS Dateien beim Aufrufen der Site laden zu lassen. Dies erreicht man am besten durch eine Browserweiche. Diese kann entweder clientseitig (z.B. per JavaScript) oder serverseitig (z.B. SSI, PHP) gesetzt werden.
Hier ein Beispiel für eine serverseitige Browserweiche per SSI für das obere Beispiel:
<!--#if expr="(${HTTP_USER_AGENT} = /Win/)" -->
<link rel="stylesheet" href="win_styles.css">
<!--#else -->
<link rel="stylesheet" href=" mac_styles.css ">

Benjamin Guin

erstveröffentlicht 21.12.2002