Inhalte an Darstellungsbereich anpassen

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass der Seiteninhalt horizontal nicht in den angegebenen Darstellungsbereich passt und der Nutzer daher zum horizontalen Schwenken gezwungen ist, wenn er den gesamten Inhalt sehen möchte.

Übersicht

Nutzer sind sowohl auf Desktop-Computern als auch auf Mobilgeräten das vertikale Scrollen auf Websites gewohnt, nicht aber das horizontale Scrollen. Deshalb ist es nicht sehr nutzerfreundlich, wenn Nutzer horizontal scrollen oder herauszoomen müssen, um die ganze Seite zu sehen.

Beim Entwickeln einer mobilen Website mit einem Meta-Darstellungsbereichs-Tag kann es leicht passieren, dass versehentlich ein Seiteninhalt erstellt wird, der nicht ganz in den angegebenen Darstellungsbereich passt. Zum Beispiel kann ein Bild, dessen Anzeigebreite größer als die Breite des Darstellungsbereichs ist, den Nutzer zum horizontalen Scrollen des Darstellungsbereichs zwingen. Passen Sie diesen Inhalt an die Breite des Darstellungsbereichs an, sodass der Nutzer nicht horizontal scrollen muss.

Empfehlungen

Die Display-Abmessungen von Geräten können stark variieren, z. B. zwischen Telefonen und Tablets und selbst zwischen verschiedenen Telefonen. Deshalb sollten Sie den Darstellungsbereich so konfigurieren, dass Ihre Seiten auf vielen unterschiedlichen Geräten richtig gerendert werden. Da die Breite des Darstellungsbereichs in CSS-Pixeln jedoch variieren kann, sollte ein gutes Rendern Ihres Seiteninhalts keine bestimmte Breite des Darstellungsbereichs erfordern.

  • Vermeiden Sie das Festlegen großer absoluter CSS-Breiten für Seitenelemente wie z. B. div{width:360px;}. Die Elemente könnten dann nämlich auf schmaleren Geräten zu breit für den Darstellungsbereich sein. Ein solches Gerät ist beispielsweise ein iPhone mit einer Breite von 320 CSS-Pixeln. Stattdessen sollten Sie relative Breitenwerte wie width:100% verwenden. Vermeiden Sie ebenso die Verwendung großer absoluter Positionswerte, durch die Elemente auf kleinen Displays außerhalb des Darstellungsbereichs angezeigt werden können.
  • Bei Bedarf können mithilfe von CSS-Medienabfragen auf kleinen und großen Displays unterschiedliche Stile angewendet werden. In diesem HTML5 Rocks-Artikel finden Sie weitere Empfehlungen dazu.
  • Lesen Sie diesen Artikel, um zu erfahren, wie Bilder geeigneter Größe bereitgestellt werden können, ohne dass beim Rendern vermeidbare Seitenanpassungen nötig werden.