Zitat:
Zitat von Mischka
Die obere große und die untere kleine hellgraue Box werden in mobilen Browsern nach zwei dritteln der breite abgeschnitten. Es sollte aber so aussehen wie auf einem aktuellen Desktop-Browser. Was mache ich falsch?
|
Du produzierst mehrere Überbreiten, z.B. .formation mit 1200px und .caroufredsel mit 1068px (letzteres Element wird allerdings durch overflow: hidden; von .caroufredsel_bg abgeschnitten).
Ebenfalls nicht sinnvoll ist right: -180px; von #home_skyscraper, und das auch noch mit seinem eh schon 1200px breiten Containing Block.
Du kannst Dein Layout ganz leicht auf dem Desktop testen, indem Du den Viewport schmalziehst - dabei darf nichts ungewollt abgeschnitten werden und es darf auch keine horizontalen Scrollbalken geben.
Haut das alles hin, wird Deine Seite auch auf mobilen Geräten laufen, sofern sie wissen, wie sie Deine Seite behandeln sollen.
Ihr Standard-Verhalten ist nämlich die Darstellung der Seite innerhalb ihres
virtuellen default-Viewports - der bekannteste Wert ist der von iPhone & iPad mit einer Breite von
980px. D.h. diese Geräte stellen die Seite de facto in einem 980px breiten Viewport dar, zoomen sie dann aber so klein, dass sie (horizontal) in ihren tatsächlichen Viewport (d.h. ihr Display) passt, der natürlich eine geringere Breite hat (wobei man dabei noch zwischen "CSS-Pixeln" und "Device-Pixeln" unterscheiden muss, aber das würde jetzt zu weit führen). Dadurch wirken die meisten Seiten erstmal winzig und man muss sie ranzoomen und anschließend seitlich verschieben, um alle Inhalte sehen zu können.
Dieses Standard-Verhalten änderst Du durch:
HTML-Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Theoretisch bräuchte man nur width=device-width, denn das sagt dem Gerät, dass es einen virtuellen Viewport verwenden soll, der genauso breit ist wie sein Display, egal ob im Landscape- oder Portrait-Mode.
Allerdings weicht hier das Verhalten von Apple-Geräten ab, denn diese geben als
device-width immer die kurze Seite wieder (analog für device-height die lange), lassen sich aber glücklicherweise durch Hinzunahme von initial-scale=1 zu einem allen übrigen Geräten entsprechenden Verhalten bewegen.
Damit verbunden ist übrigens ein Fehler, der im Internet enorm verbreitet ist: Es gibt zahllose Tipps für media queries wie (max-)device-with: 1024px "
for iPad landscape" und (max-)device-with: 768px "
for iPad portrait" - was eben falsch ist, denn das iPad gibt auch im Landscape-Mode 768px als device-with zurück. Analoge Tipps gibt es auch für das iPhone, das sich aber nach dem gleichen Prinzip wie das iPad verhält. Subjektiv lese ich diesen Sachverhalt leider öfter falsch als richtig
Ebenso weit verbreitet ist die Ergänzung des meta-Elementes um maximum-scale=1 und user-scalable=no - sowas bitte nie machen! Es ist ein Relikt aus Zeiten des Apple Rotation Bugs, den es aber nicht mehr gibt, also weg mit solchem Unsinn, der heutzutage nur noch bewirkt, dass die meisten Nutzer die Seite nicht mehr zoomen können.
So, eigentlich wollte ich gar nicht so viel schreiben, aber da man zu diesem Thema über Google eben leider auch viel Unsinn findet (wie gesagt), habe ich halt mal etwas weiter ausgeholt