Fest gebaut oder fliessend

Dreimal derselbe Inhalt in drei Gerätebreiten. Die rot schraffierte Fläche ist ungenutzter Platz.

Diese Seite vergleicht feste Breiten nebeneinander und braucht deshalb mindestens 480px. Auf schmalen Geräten lässt sich die Rahmenreihe seitlich schieben – das ist hier Absicht und gilt nur für dieses Messwerkzeug, nie für eine Kundenseite.

A · Fest auf 320px gebaut, mittig gestellt

Der Inhalt bleibt immer 320px breit. Je breiter das Gerät, desto mehr Platz verfällt – und niemand kann sagen, ob der Rand gewollt ist.

☰

Willkommen bei uns

Kurzer Einleitungstext, der zeigt, wie sich die Zeilenlänge verhält.

Bild 16:9
Rahmen 320px → Inhalt 320px
☰

Willkommen bei uns

Kurzer Einleitungstext, der zeigt, wie sich die Zeilenlänge verhält.

Bild 16:9
Rahmen 375px → Inhalt 320px
☰

Willkommen bei uns

Kurzer Einleitungstext, der zeigt, wie sich die Zeilenlänge verhält.

Bild 16:9
Rahmen 430px → Inhalt 320px

B · Fliessend mit festgelegtem Seitenabstand von 16px

Keine Entwurfsbreite. Der Inhalt ist immer alles ausser 2×16px Rand – auf jedem Gerät gleich, der Rand ist erkennbar Absicht.

☰

Willkommen bei uns

Kurzer Einleitungstext, der zeigt, wie sich die Zeilenlänge verhält.

Bild 16:9
Rahmen 320px → Inhalt 288px
☰

Willkommen bei uns

Kurzer Einleitungstext, der zeigt, wie sich die Zeilenlänge verhält.

Bild 16:9
Rahmen 375px → Inhalt 343px
☰

Willkommen bei uns

Kurzer Einleitungstext, der zeigt, wie sich die Zeilenlänge verhält.

Bild 16:9
Rahmen 430px → Inhalt 398px

Was dieses Werkzeug zeigt

Derselbe Inhalt, zweimal aufgebaut, in je drei festen Rahmenbreiten.

Variante A – fest gebaut
Der Inhaltsbereich ist auf 320 Pixel festgelegt und mittig gestellt. Er bleibt 320 Pixel breit, egal wie breit der Rahmen ist. Der Rest der Fläche bleibt ungenutzt und ist rot schraffiert dargestellt.
Variante B – fliessend
Es gibt keine festgelegte Inhaltsbreite. Stattdessen ist nur ein Seitenabstand von 16 Pixeln festgelegt. Der Inhalt nimmt immer den ganzen Rest ein. Bei 320 Pixeln Rahmen sind das 288, bei 430 sind es 398.
Woher die Zahlen kommen
Die Zahlen unter den Rahmen sind Sollwerte, die fest im Dokument stehen. Wenn JavaScript läuft, werden sie durch die tatsächlich gemessene Breite ersetzt. Weichen sie voneinander ab, stimmt etwas nicht – das ist beabsichtigt und dient als Selbstkontrolle.
Warum diese Seite seitlich schiebbar ist
Drei feste Breiten nebeneinander brauchen mehr Platz, als ein Handy hat. Schiebbar ist nur die Rahmenreihe, nicht die Seite. Für eine Kundenseite wäre das ein Fehler, für einen Breitenvergleich ist es der einzige Weg.

Grundlage und Quellen

Hinweis: Die deutschen MDN-Seiten sind automatisch aus dem Englischen übersetzt und können Fehler enthalten. MDN kennzeichnet das selbst. Die hier zitierten Stellen wurden am 23.09.2026 geprüft.