heinetz: Design für mobile Browser

Beitrag lesen

Hallo Forum,

ich will etwas konkreter werden ;)

Ich hatte mir zunächst ein mobile.css angelegt und mit Firebug angefangen so zu entwickeln, dass die Site auf meinem Nokia E51 bei der Auflösung von 240X320 sowohl mit dem Symbian-browser also auch mit Opera Mobile ganz gut angezeigt worden ist. Alle Boxen und alle Bilder haben width:100% bekommen,
"überflüssige" Elemente wurden ausgeblendet und alles sah ganz gut aus.

Danach hörte ich dann, dass das IPhone die Site mit einer Auflösung von 1024 mal wasweissich darstellt. Super, die Site ist auf 1024x768 optimiert. Ich kann also die gesamte Website anzeigen ... Falsch! Ich habe die Abmessungen von dem IPhone-Screen nicht im Kopf aber 1024 Pixel sind bei 300dpi doch sehr klein! Wenn ich mir mobil.stern.de oder mobil.tagesschau.de ansehe, ist wird der Content unter Firefox 340 bzw. 480 Pixel breit dargestellt. Auf meinem Monitor also mit einer Menge Weissraum rum herum. Verkleinere ich das Fenster auf 240X320 Pixel werden unter Firefox Scrollbars angezeigt, während mein E51 den Inhalt skalliert. Und da komme ich nicht weiter ;(

Irgendwie kommt dort eine wie auch immer gearetete Weiche zum tragen, die man dummerweise nicht sieht. Auch habe ich vom meta-tag viewport gelesen,
habe aber leider keine Ahnung, was genau das macht.

danke für Tipps und

beste gruesse,
heinetz