Mobile Geräte - Anzeige richtig einstellen

Dies ist eine wichtige Optimierung wie die Website zur Anzeige auf einem mobilen Endgerät angepasst werden kann. Das Meta-Element: viewport sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

[Bildschirmfoto] Mobile Geräte - Anzeige richtig einstellen

Die Browser von mobilen Geräten gehen zuerst einmal davon aus, dass Websites nicht für mobile Endgeräte ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt. Mit dem Nachteil, dass die Inhalte sehr klein und Schriften nicht lesbar sind, der Besucher muss dementsprechend hineinzoomen.

Anzeigebereich für Websites einstellen

Die Einstellung des Anzeigebereich (Viewport) lässt sich sehr einfach über das <meta>-Element anpassen. Für die Änderung fügt man folgende Zeile in den HTML-<head> ein, die dann von mobilen Geräten ausgewertet wird.
<meta name="viewport" content="width=1024">

Den Wert entsprechend der Breite der Website anpassen und danach auf dem mobilen Gerät testen.

Sie können den Wert mit: device-width auch automatisch anpassen lassen.

<meta name="viewport" content="width=device-width">

Das Meta-Element für den Anzeigebereich besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Tipp

Google-Test auf Optimierung für Mobilgeräte - Dieser Test analysiert eine URL und gibt an, ob die Seite für Mobilgeräte optimiert ist.