Divi erfordert keine spezielle Codierung, damit es auf Mobilgeräten großartig aussieht. Alles, was im Theme Builder erstellt wird, reagiert automatisch auf Mobilgeräte. Einer der wenigen Nachteile besteht darin, dass Benutzer auf Mobilgeräten nicht in Texte oder Bilder hineinzoomen können. Das wird bis heute leider nicht von Eleganth Themes unterstützt.
Das führt aber immer wieder zu Frust bei den Benutzern und zudem zu einer Abwertung von Google wegen fehlender Barrierefreiheit, was dein SEO negativ beeinflusst.
Aber zum Glück gibt es auch dafür einfache Lösungen.
Hier findest du zum einen ein PlugIn und zum anderen zwei kleine Scripte. Mit jeder dieser Optimierungen ist das Problem schnell behoben und das Zoomen auf dem Handy und Tablett möglich.
PlugIn
Wie für so vieles gibt es auch für dieses Problem ein entsprechendes WordPress PlugIn.
Definitely allow mobile zooming
Das PlugIn ist kostenlos, aktuell gehalten und kostenlos. Leider ibt es dafür aber keine deutsche Übersetzung, es ist nur in englisch erhältlich
Bedenke aber dass jedes zusätzliche PlugIn deine Seite verlangsamen und ein potentielles Sicherheitsrisiko sein kann.
Warum also ein PlugIn benutzen wenn es mit ein paar einfachen Zeilen Code die du hier kopieren kannst genauso gut geht?
Theme Optionen
Du kannst das gleiche auch ohne PlugIn erreichen in dem du dir folgenden Code kopierst, in den Divi Theme Optionen auf den Reiter Integration wechselst und ihn dort in das Feld unter „Code dem < head > Ihres Blogs hinzufügen“ einfügst.
<script>
(function($) {
$(document).ready(function() {
//SET viewport google friendly
$(‘meta[name=viewport]’).each(function() {
var content = $(this).attr(‘content’);
if (content.indexOf(‘maximum-scale=1.0, user-scalable=0’) >= 0) {
content = content.replace(‘maximum-scale=1.0, user-scalable=0’, ‘maximum-scale=5.0, user-scalable=1’);
$(this).attr(‘content’, content);
}
});
});
})(jQuery);
</script>
Dadurch wird das Zoomen mit bis zu 5 facher Vergrößerung auf Mobilgeräten erlaubt.
Wenn du bei maximum-scale=5.0 einen anderen Wert einträgst ändert sich der Zoomfaktor.
Der Nachteil bei dieser Methode ist, dass Elegant Themes jederzeit mit einem Udpate das ganze überschreiben kann und du es erneut eingeben musst. Besser du nutzt ein Child -Theme und kopierst den Code in deinen Child Script Ordner oder du nutzt den nächsten Code für die functions.php
Functions.php
Den folgenden Code kannst du dir ganz einfach im Dashboard unter Design – Theme Datei-Editor in die functions.php eintragen. Wie immer bei Änderungen an der functions.php ist es ratam ein Child-Theme zu verwenden.
function db_enable_pinch_zoom() {
echo '<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=0.1, maximum-scale=5.0">';
}
Auch hier kannst du den Zoomfaktor selbst bestimmen. Ändere dafür einfach den Wert maximum-scale=5.0 entsprechend.
Das war es dann auch schon. Welche der 3 Möglichkeiten du wählst bleibt dir überlassen. Das Resultat is immer das selbe. Deine Benutzer können jetz wie gewohnt auch auf dem Handy und Tablett zoomen und sind glücklich.
0 Kommentare