Darstellungsbereich konfigurieren

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass Ihre Seite keinen Darstellungsbereich angibt oder dass ein Darstellungsbereich festgelegt wurde, der nicht an unterschiedliche Geräte angepasst wird.

Übersicht

Ein Darstellungsbereich bestimmt, wie eine Webseite auf einem Mobilgerät angezeigt wird. Wenn kein Darstellungsbereich vorhanden ist, rendern Mobilgeräte die Seite mit einer typischen Desktop-Bildschirmbreite, die an den Bildschirm angepasst wird. Mithilfe eines Darstellungsbereichs können Sie die Seitenbreite festlegen und auf verschiedenen Geräten skalieren.

Links: Seite ohne Meta-Darstellungsbereich.
Rechts: Seite mit an die Gerätebreite angepasstem Darstellungsbereich.

Empfehlungen

Seiten, die für das Anzeigen auf Mobilgeräten optimiert sind, sollten im Dokument-Header einen Meta-Darstellungsbereich mit folgender Angabe enthalten: width=device-width, initial-scale=1.

<meta name=viewport content="width=device-width, initial-scale=1">

Zusätzliche Informationen

Begriffserklärungen:

  • Hardware-Pixel: ein physisches Pixel auf dem Display. Zum Beispiel hat ein iPhone 5 ein Display mit 640 horizontalen Hardware-Pixeln.
  • Geräteunabhängige Pixel (dip): eine Skalierung von Gerätepixeln auf ein einheitliches Referenzpixel bei normalem Betrachtungsabstand. Die Größe sollte auf allen Geräten ungefähr gleich sein. Ein iPhone 5 hat eine Breite von 320 dip.
  • CSS-Pixel: Einheit, die für das vom Darstellungsbereich festgelegte Seitenlayout verwendet wird. Pixelabmessungen in Stilen wie z. B. width: 100px werden in CSS-Pixeln angegeben. Das Verhältnis von CSS-Pixeln zu geräteunabhängigen Pixeln ist der Skalierungsfaktor bzw. Zoom der Seite.

Desktop-Seiten auf Mobilgeräten

Wenn für eine Seite kein Darstellungsbereich angegeben ist, rendern mobile Browser diese Seite mit einer Standardbreite zwischen 800 und 1.024 CSS-Pixeln. Der Seitenskalierungsfaktor wird so eingestellt, dass die Seite auf das Display passt. Die Nutzer müssen dann zoomen, bevor sie mit der Seite interagieren können.

Meta-Darstellungsbereichs-Tag

Das Meta-Darstellungsbereichs-Tag informiert den Browser darüber, wie die Abmessungen und die Skalierung der Seite gesteuert werden sollen. Es sollte im Dokument-Header enthalten sein.

Darstellungsbereich mit fester Breite

Für den Darstellungsbereich kann eine bestimmte Breite festgelegt werden, z. B. width=320 oder width=1024. Davon wird zwar eher abgeraten, aber es kann eine geeignete Notlösung sein, damit Seiten mit festen Abmessungen wie erwartet dargestellt werden.

Flexibler Darstellungsbereich

Bei Verwendung des Meta-Darstellungsbereichs-Werts width=device-width wird die Seite an die Display-Breite in geräteunabhängigen Pixeln angepasst. Dadurch kann die Seite den Inhalt an unterschiedliche Display-Größen anpassen.

Einige Browser, einschließlich unter iOS und auf dem Windows Phone, halten die Seitenbreite beim Drehen ins Querformat konstant und zoomen, statt den Inhalt an das Display anzupassen. Durch Hinzufügen des Attributs initial-scale=1 wird der Browser angewiesen, eine 1:1-Beziehung zwischen CSS-Pixeln und geräteunabhängigen Pixeln herzustellen, unabhängig von der Ausrichtung des Geräts. So kann die Seite die gesamte Breite des Querformats nutzen.

Links: iPhone 5, das mit width=device-width gedreht wird, was eine Querformatbreite von 320 px ergibt.
Rechts: iPhone 5, das mit width=device-width, initial-scale=1 gedreht wird, was eine Querformatbreite von 568 px ergibt.

Für einen flexiblen Darstellungsbereich müssen Seiten so gestaltet werden, dass sie bei verschiedenen Breiten funktionieren. Weitere Informationen finden Sie in unseren Empfehlungen zum Anpassen von Inhalten an den Darstellungsbereich.

Weitere Überlegungen

minimum-scale, maximum-scale, user-scalable vermeiden

Es ist möglich, einen minimalen und einen maximalen Zoom festzulegen. Zudem kann das Zoomen durch den Nutzer auch gänzlich deaktiviert werden. Diese Optionen beeinträchtigen die Zugänglichkeit und sollten im Allgemeinen vermieden werden.

@viewport

Das Meta-Darstellungsbereichs-Tag wird zwar in vielen Fällen unterstützt, gehört aber nicht zum Standard. Dieses Verhalten ist Bestandteil von CSS im Rahmen der Spezifikation CSS Device Adaptation. Solange diese Spezifikation noch nicht finalisiert und auf breiter Basis implementiert ist, sollten Autoren zur Gewährleistung der Kompatibilität weiterhin das Meta-Darstellungsbereichs-Tag verwenden, entweder allein oder mit entsprechenden @viewport-Stilen.

Ressourcen: