Vor kurzem ist mir bei der Überprüfung meiner eigenen Website etwas aufgefallen: Zoomen mit Divi war auf dem Smartphone nicht möglich. Ich konnte meine Website nicht mit zwei Fingern vergrößern.
Erst dachte ich an irgendeine Einstellung, die ich selbst irgendwann vorgenommen hatte. Aber bei der Suche nach der Ursache stellte sich heraus: Divi verhindert standardmäßig das Zoomen auf Mobilgeräten.
Das ist nicht nur lästig, sondern auch im Hinblick auf die Barrierefreiheit einer Website problematisch. Schließlich gibt es Menschen, die Inhalte vergrößern müssen, um sie gut lesen zu können.
Also habe ich nach einer Lösung gesucht. Der Fix ist zum Glück ziemlich überschaubar.
Woran liegt es?
Im Quellcode meiner Website fand ich folgenden Eintrag:
Entscheidend sind hier vor allem diese beiden Angaben:
maximum-scale=1.0 user-scalable=0
maximum-scale=1.0 begrenzt die mögliche Vergrößerung und user-scalable=0 verhindert das Zoomen durch die Nutzer:innen. Das wollte ich ändern.
Betrifft das nur Divi 5?
Zunächst hatte ich das Problem auf meiner Website entdeckt, die inzwischen mit Divi 5 läuft. Deshalb dachte ich erst, es könnte mit der neuen Divi-Version zusammenhängen.
Ein Blick auf eine meiner anderen Websites zeigte aber: Auch dort wurde das Zoomen verhindert. Diese Website läuft noch mit Divi 4.
Ich habe den folgenden Fix deshalb sowohl mit Divi 4 als auch mit Divi 5 getestet. Bei beiden Websites funktioniert das Zoomen auf dem Smartphone anschließend wieder.
Warum sollte man das Zoomen überhaupt ermöglichen?
Die Möglichkeit, Inhalte zu vergrößern, ist auch ein Thema der Barrierefreiheit. Die Web Content Accessibility Guidelines (WCAG) sehen unter dem Erfolgskriterium 1.4.4 „Resize Text“ vor, dass Text auf bis zu 200 Prozent vergrößert werden kann, ohne dass Inhalte oder Funktionen verloren gehen.
Das W3C beschäftigt sich außerdem ausdrücklich mit dem Viewport-Meta-Tag. In der Testregel „Meta viewport allows for zoom“ wird unter anderem geprüft, ob user-scalable=no die Vergrößerung verhindert oder maximum-scale kleiner als 2 gesetzt ist.
Divis Standardeinstellung mit maximum-scale=1.0 und user-scalable=0 ist deshalb aus Sicht der Barrierefreiheit problematisch.
Weitere Informationen dazu findest du direkt beim W3C:
W3C: Understanding Success Criterion 1.4.4 – Resize Text
W3C: Meta viewport allows for zoom
Auch wenn eine Website responsiv aufgebaut ist und ausreichend große Schriften verwendet, kann es für manche Menschen notwendig sein, einzelne Inhalte zusätzlich zu vergrößern. Deshalb sollte eine Website den Nutzer:innen diese Möglichkeit nicht ohne guten Grund nehmen.
So kannst du das Zoomen bei Divi wieder ermöglichen
Wichtig: Bevor du Änderungen am PHP-Code deiner Website vornimmst, solltest du unbedingt ein aktuelles Backup erstellen.
Die gute Nachricht: Für diesen Fix müssen wir uns nicht selbst irgendeine Lösung basteln. Elegant Themes stellt eine eigene Anleitung zum Aktivieren von Pinch-to-Zoom zur Verfügung.
Elegant Themes: How to Enable Pinch to Zoom on Mobile Devices
Der folgende Code stammt aus dieser offiziellen Anleitung von Elegant Themes. Dort werden zwei Möglichkeiten beschrieben: Der Code kann über die functions.php eines Child Themes eingebunden werden oder, wenn kein Child Theme verwendet wird, mithilfe des Plugins Code Snippets.
Ich habe mich für die zweite Variante entschieden.
1. Code Snippets installieren
Gehe im WordPress-Backend zu:
Plugins → Plugin hinzufügen
Suche dort nach Code Snippets, installiere das Plugin und aktiviere es.
Nach der Aktivierung findest du im WordPress-Backend den neuen Menüpunkt Snippets.
2. Neues PHP-Snippet anlegen
Lege unter Snippets ein neues Snippet an. Auf dem folgenden Screenshot siehst du, wie ich das Snippet eingerichtet habe. Als Titel habe ich „Divi: Zoom auf Mobilgeräten erlauben“ verwendet. Der Code-Typ ist PHP, als Ausführungsort bleibt „Run everywhere“ eingestellt und die Priorität steht auf 10.
Den benötigten PHP-Code kannst du als TXT-Datei mit dem Divi-Zoom-Fix herunterladen und anschließend in das Feld „Snippet Content“ kopieren.
Als Beschreibung habe ich eingetragen:
„Ersetzt den von Divi gesetzten Viewport-Meta-Tag, damit Nutzer:innen die Website auf Mobilgeräten per Pinch-to-Zoom vergrößern können. Erlaubt eine Vergrößerung bis Faktor 5 und verbessert damit die Barrierefreiheit.“
Anschließend das Snippet speichern und aktivieren.
3. Website kontrollieren
Nach der Aktivierung solltest du zunächst überprüfen, ob deine Website weiterhin ganz normal dargestellt wird.
Falls du ein Cache-Plugin verwendest, leere gegebenenfalls den Cache.
Danach kannst du deine Website auf dem Smartphone aufrufen und ausprobieren, ob sie sich jetzt mit zwei Fingern vergrößern lässt.
Bei meinen beiden Test-Websites funktionierte das sofort.
So kontrollierst du den Viewport im Quellcode
Wenn du zusätzlich überprüfen möchtest, ob die Änderung tatsächlich übernommen wurde, kannst du dir den Quellcode deiner Website anzeigen lassen.
Suche dort nach:
viewportBei mir steht nach dem Fix:
Wichtig ist außerdem, dass nicht zusätzlich noch der alte Viewport-Eintrag mit maximum-scale=1.0 und user-scalable=0 vorhanden ist.
Damit dürfen Nutzer:innen die Seite nun bis zum Faktor 5 vergrößern.
Ein kleiner Test, der sich auch für andere Websites lohnt
Für mich gehört das inzwischen zu den Dingen, die ich bei einer Website überprüfen würde: Kann ich sie auf dem Smartphone problemlos vergrößern?
Der Test dauert schließlich nur ein paar Sekunden. Website auf dem Smartphone öffnen, zwei Finger auf den Bildschirm und versuchen, den Inhalt auseinanderzuziehen.
Wenn nichts passiert, lohnt sich ein Blick in den Quellcode und auf den dort gesetzten Viewport-Meta-Tag.
Noch ein Hinweis zu Divi
Ich habe diesen Fix im August 2026 sowohl mit einer Divi-4- als auch mit einer Divi-5-Website erfolgreich getestet.
Divi wird allerdings laufend weiterentwickelt. Es ist also durchaus möglich, dass Elegant Themes die Viewport-Einstellungen in einer späteren Version selbst ändert. Nach größeren Divi-Updates lohnt es sich deshalb, noch einmal kurz zu testen, ob das Snippet weiterhin notwendig ist.
Und bis dahin darf auf meinen Websites jetzt wieder gezoomt werden.
