heinetz: Design für mobile Browser

Beitrag lesen

Wie sorge ich dafür, dass von meiner mobile Website auf einem IPhone4, dass 1024 Pixel in der Breite darstellen kann, nicht 1024 Pixel, sondern nur
meinetwegen 340 hochskaliert darstellt werden, weil 684 Weissraum sind.
Das scheint in irgendeinem Zusammenhang mit dem Metatag "viewport" zu stehen, nur dass sich die Angabe content="width=device-width", die man nach alldem, was ich gelesen habe, bevorzugt verwenden sollte für mich liesst wie inhalt="breite=breite_des_anzeigegeraets". Dass es bei der breite_des_anzeigegeraets um eine Zentimeterangabe geht kann ich mir nicht so recht vorstellen und denke deshalb das die breite_des_anzeigegeraets 1024Pixel sind. Mein Content ist allerdings nur maximal 340 Pixel breit ;(

ich glaube, ich näher mich der Erklärung/Lösung und schreibe hier, wie ich das ganze verstehe:

1024px beim IPhone4 waren ein Gerücht. Es sind scheinbar 640X960px
... aber das tut eigentlich nichts zur Sache. Das IPhone3 hat zum Vergleich eine Auflösung von 320X480px, was nichts aussergewöhnliches ist. Beide stellen den gesamten Content einer Website dar, indem sie ihn schlicht verkleinern. Genau das kenne ich von Opera Mobile, der jede Website auf meinem E51 (240X320px) so weit verkleinert, dass sie erstmal vollständig vollständig quasi als Thumbnail dargestellt wird. Dahinter steckt, dass Safari auf dem IPhone, wie Opera Mobile unabhänig von der tatsächlichen Auflösung so tun, als seien sie grösser und einen Viewport von 850px (Opera) bzw. 960px (Safari) "vorgaukeln". Ein DOM-Object von 320px breite wird also auf eine IPhone von Safari 3fach verkleinert dargestellt. Dieses für Websites, die nicht für mobile Devices optimiert sind ansich nützliche Feature lässt sich aushebeln, indem man dem mobilen Browser klarmacht, dass er sich nicht grösser ausgeben soll, als er ist:

<meta name = “viewport” content = “width = device-width,  initial-scale=1″ />

Damit müsste ein IPhone4, dass bei der selben Bildschirmdiagonale im Vergleich zum IPhone3 doppelt so hoch auflöst den selben Content halb so gross anzeigen. Weil das aber auch nicht im Sinne des Erfinders ist bedient sich Apple eines einfachen Tricks und das IPhone4 gibt sich wie das IPhone3 mit einer Auflösung von 320X480px als device-width/height aus.

... wenn ich das:

http://www.mobilewebdesign.de/index.php?paged=6
http://www.engadgeted.net/2010/07/08/viewports-and-pixels-on-iphone-4/
http://learnthemobileweb.com/tag/viewport

... richtig verstanden habe. Wenn nicht freue ich mich, wenn mich jemand korrigiert ;)

beste gruesse,
heinetz