Spaltenlayout wird auf iPhone nicht korrekt dargestellt

[Gunnar Bittersmann]

@@Matthias Apsel

Du hast ein festzementiertes Seitenlayout, indem du das body-Element bei einer Breite von 957px fixiert hast. Um die Seite auch auf Mobiltelefonen ordentlich darzustellen, bietet sich die Zeile <meta name="viewport" content="width=device-width, initial-scale=1.0"> im head-Element an.

Nein, das tut sie nicht. Dadurch wird die Seite nicht skaliert und, da die Seite mit 957px breiter ist als der Viewport, ist nur ein schmaler Teil von ihr zu sehen. Besser ist es wohl, die Seite in voller Breite darzustellen und den Nutzern einen Überblick zu geben und sie dann reinzoomen zu lassen.

Dass ein responsives Design noch besser (und da die Uhr 2015 schlägt, muss man sagen: zwingend angebracht) wäre, steht natürlich außer Zweifel. Und bei responsiven Seiten sollte <meta name="viewport" content="width=device-width, initial-scale=1.0"> im head stehen; aber eben nur bei diesen.

Bei alten Seiten (und „alt“ bezieht sich nicht zwangsläufig auf das Erstelldatum, sondern auf die verwendete Technologie; und Moes Seite ist alt) sollte man den Viewport so groß setzen, dass die Seite reinpasst. Bspw. bei body { width: 1200px } also <meta name="viewport" content="width=1200, initial-scale=1.0">.

Die Defaultbreite (d.h. wenn keine meta-viewport-Angabe gemacht ist) beträgt 980 Pixel. Für Moes 957 Pixel plus ein bisschen Rand links und rechts also ein passender Wert, so dass in diesem Fall keine meta-viewport-Angabe erforderlich ist.

Außerdem könnte man gleich auf HTML-5 setzen. siehe Wiki/Tutorials

Nicht „könnte“. Man sollte.

LLAP 🖖