Die Viewport-Funktion stellt sicher, dass Besucher die Website zoomen können, was für Menschen mit Sehbehinderungen essentiell ist.
Was ist der Viewport?
Der Viewport-Meta-Tag steuert, wie eine Website auf mobilen Geräten angezeigt wird. Falsche Einstellungen können das Zoomen verhindern, was ein großes Problem für Nutzer mit Sehbehinderungen darstellt.
Standardwerte bei Neuinstallation
Hauptschalter an. width=device-width, user-scalable=yes und initial-scale=1 sind an. maximum-scale wird auf 5.0 gesetzt (nicht entfernt). JavaScript-Fallback aus.
Sinn und Einsatzmöglichkeiten
- Für Besucher mit Sehbehinderungen: Ermöglicht das Zoomen bis zu 500% (WCAG-Anforderung)
- Für alle Besucher: Bessere Lesbarkeit auf mobilen Geräten
- WCAG-Konformität: Erfüllt WCAG 1.4.4 (Resize Text) und 1.4.10 (Reflow)
- Mobile Optimierung: Responsive Darstellung auf verschiedenen Bildschirmgrößen
Relevante WCAG-Kriterien:
- 1.4.4 Textgröße anpassen: Stellt sicher, dass Nutzer den Text auf bis zu 200% vergrößern können.
- 1.4.10 Umfluss (Reflow): Sorgt dafür, dass bei 400% Zoom kein horizontales Scrollen nötig ist.
Viewport-Eigenschaften
Das Plugin kann folgende Viewport-Eigenschaften kontrollieren:
- width=device-width: Passt die Breite an die Gerätebreite an (empfohlen)
- user-scalable=yes: Ermöglicht das Zoomen (wichtig für WCAG)
- initial-scale=1: Setzt den initialen Zoom auf 100%
- maximum-scale: Begrenzt das maximale Zoom-Level (optional, sollte mindestens 5.0 sein)
Konfigurationsmöglichkeiten
Viewport-Anpassung aktivieren:
- Hauptfunktion global ein- oder ausschalten
- Das Plugin sucht automatisch nach dem Viewport-Tag und passt ihn an
Viewport-Eigenschaften:
- width=device-width hinzufügen/gewährleisten: Aktiviert responsive Darstellung
- user-scalable=yes gewährleisten: Entfernt user-scalable=no oder setzt es auf yes
- initial-scale=1 hinzufügen/gewährleisten: Setzt den initialen Zoom auf 100%
Maximum Zoom:
- maximum-scale hinzufügen/anpassen: Aktiviert die Kontrolle über das maximale Zoom-Level
- maximum-scale komplett entfernen: Ermöglicht unbegrenztes Zoomen (beste Option für WCAG)
- Wert für maximum-scale: Wenn nicht entfernt, sollte der Wert mindestens 5.0 sein (WCAG-Anforderung)
JavaScript-Fallback (experimentell):
- Falls dein Theme den Viewport-Tag nicht ausgibt oder an ungewöhnlicher Stelle, kann der JavaScript-Fallback versuchen, ihn hinzuzufügen
- Hinweis: Diese Methode ist weniger zuverlässig als die serverseitige Anpassung
Viewport-Test
Der responsive Viewport-Test lädt die öffentliche Homepage neu und bewertet die gefundene Konfiguration in fünf verständlichen Prüfpunkten:
- Gerätebreite (
width=device-width) - Initialskalierung
- erlaubtes Vergrößern
- maximale Vergrößerung
- Anzahl der Viewport-Tags
Eine Zusammenfassung kennzeichnet das Ergebnis als korrekt, verbesserungswürdig oder problematisch. Empfehlungen lassen sich, soweit möglich, direkt in die Einstellungen übernehmen. Speichere die Einstellungen anschließend, damit sie auf der Website wirksam werden.
Unter Technische Details anzeigen findest du bei Bedarf die geprüfte URL und die vollständigen gefundenen Viewport-Tags. Während der Prüfung zeigt die Oberfläche einen in Form und Größe passenden Ladezustand; Verbindungs- oder Analysefehler werden getrennt vom inhaltlichen Prüfergebnis erklärt. Die Darstellung passt sich an Smartphones, Tablets und Desktop-Bildschirme an.
Über Hilfe öffnest du eine kompakte Anleitung zur sicheren Viewport-Konfiguration. Auf Smartphones erscheint sie als nach unten wischbares Bottom Sheet, auf größeren Bildschirmen als Dialog. Sie erklärt die empfohlenen Werte, die Funktionsweise der Prüfung, den JavaScript-Fallback, notwendige Cache-Schritte und die WCAG-Kriterien 1.4.4 sowie 1.4.10.
Anwendungsbeispiele
Beispiel 1: WCAG-konforme Konfiguration
Aktiviere alle Eigenschaften (width, user-scalable, initial-scale) und entferne maximum-scale komplett. Dies ermöglicht unbegrenztes Zoomen und erfüllt alle WCAG-Anforderungen.
Beispiel 2: Maximum Zoom begrenzen
Falls du das Zoom-Level begrenzen möchtest, setze maximum-scale auf mindestens 5.0. Beachte: Unbegrenztes Zoomen ist für WCAG besser.
Beispiel 3: JavaScript-Fallback nutzen
Falls dein Theme den Viewport-Tag nicht ausgibt, aktiviere den JavaScript-Fallback. Teste jedoch gründlich, ob er funktioniert.
Tipps
- Verwende den integrierten Viewport-Test, um deine aktuelle Konfiguration zu prüfen
- Entferne maximum-scale komplett für beste WCAG-Konformität
- Vermeide user-scalable=no – dies verhindert das Zoomen und führt zu WCAG-Verstößen
- Nach Änderungen: Leere alle Caches (WordPress, Server, Browser), damit die Änderungen wirksam werden
- Teste die Zoom-Funktion auf verschiedenen Geräten und Browsern
- Der JavaScript-Fallback sollte nur als letzte Option verwendet werden
Häufige Probleme
Problem: Viewport-Tag wird nicht gefunden
Lösung: Prüfe, ob dein Theme den Viewport-Tag ausgibt. Falls nicht, aktiviere den JavaScript-Fallback oder füge den Tag manuell in dein Theme ein.
Problem: Änderungen werden nicht angewendet
Lösung: Leere alle Caches. Viewport-Änderungen werden oft gecacht und benötigen einen Cache-Clear.
Technische Details
- Das Plugin sucht nach dem Viewport-Tag im HTML-Head und passt ihn serverseitig an
- Falls mehrere Viewport-Tags gefunden werden, wird nur der erste analysiert
- Der JavaScript-Fallback versucht, den Tag dynamisch hinzuzufügen, ist aber weniger zuverlässig
- WCAG 1.4.4 erfordert, dass Text bis zu 200% vergrößert werden kann
- WCAG 1.4.10 erfordert, dass bei 400% Zoom kein horizontales Scrollen nötig ist
Verfügbar für: Alle Pläne Free