Header neu gestalten

[marctrix]

Hej Holger,

Ein neuer Versuch:

Ein gelungener!

Uff!

Mühsam ernährt sich das Eichhörnchen, aber es wird!

Mal etwas zum Hintergrund. Als Apple hochauflösende Displays auf Handys eingeführt hat, gab es ein Problem (das vorher eigentlich auch schon auf Desktops bestand, auf den kleinen Smartphone-Bildschirmen war es nur gravierender):

Kaum jemand konnte die gestochen scharfen aber winzig kleinen Schriften noch lesen. Wenn ein Entwickler die üblichen 10-16px für seine Webseite angab und die wurden auf einem Display mit winzigen Pixeln dargestellt, waren auch die aus 16 winzigen Pixeln bestehenden Schriften winzig.

Der Trick: Apple vervierfachte die Display-Auflösung (in Höhe und Breite die doppelte Anzahl von Bildpunkten) und stellte die Schrift nun doppelt so hoch dar, wie vom Seitenbetreiber angegeben.

Nun passte es wieder: die Schrift war so groß wie vorher. Weil aber zur Darstellung die vierfache Menge an Rasterpunkte bereit stand, sah sie dabei knackig scharf aus.

Wenn man ein altes und eine neues Handy nebeneinander legte wurde der Unterschied besonders deutlich.

Um nun zu deinen Bildern zu kommen. Dasselbe, was Apple mit der Schrift machte (doppelt so hoch und doppelt so breit anzeigen) musste auch mit Bildern so passieren, sonst passt das Größenverhältnis nicht mehr.

Seither also wird ein Bild, das 100x100 Pixel groß ist auf 200x200 Pixeln angezeigt. Genauso groß und genauso unscharf wie auf alten Handys was neben der jetzt gestochen scharfen Schrift besonders auffällt. Der Trick, den man nun anwenden sollte: nimm ein Bild mit 200x200 Pixeln und schreibe in dein css, dass es eine Größe von 100x100 Pixeln haben soll. Nun stellt das Handy das Bild, das 200x200 Pixel hat auch genau auf diesen dar.

Im css stehen 100 Pixel für das Bild (wird auf 200 angezeigt) und 16 für die Schrift (wird auf 32 angezeigt). Die Verhältnisse stimmen wieder, die Größe ist dieselbe wie auf alten Handys aber für die Darstellung benutzt das Handy die vierfache Auflösung und Bild wie Schrift sind nun gestochen scharf.

Das geht nur, wenn die dafür nötigen Bildinformationen auch im Bild vorliegen. Daher Bilder immer doppelt so groß angeben, wie du im css angibst.

Übrigens machen das schon seit Jahren alle Handy-Displays so und Apple mindestens macht das inzwischen auf seinen Retina-Displays auch auf dem Desktop.

Marc