Snippets · WooCommerce
„Desktopwebsite“ am Handy erkennen
Ist am Handy versehentlich „Desktopwebsite“ aktiv, wirkt jeder Shop winzig. Dieses Snippet erkennt den Zustand und blendet unten einen kurzen Hinweis ein.
Worum es geht
Kunden halten den Shop für nicht mobiltauglich und gehen – dabei ist nur die Desktop-Ansicht des Browsers eingeschaltet.
So setzen Sie es ein
- Code einfügen und speichern.
- Zum Testen am Android-Handy in Chrome im Menü „Desktopwebsite“ aktivieren und den Shop neu laden.
- Mit „ד schließt der Kunde den Hinweis dauerhaft für diesen Browser.
Was das Snippet nicht kann
- Einfache Erkennung über Bildschirmgröße und Browserkennung – sehr seltene Geräte können durchrutschen.
- Ein fester Text, keine Einstellungen im Backend.
- Auch iPhones im Desktop-Modus werden erkannt; der Text beschreibt aber das Android-Menü.
Vor dem Einbau
Testen Sie Snippets zuerst in einer Testumgebung und legen Sie eine Datensicherung an. Code ohne Gewähr.
Kopieren und einfügen
functions.php (Child-Theme) oder Snippet-Plugin
/**
* MEK7 Snippet: Hinweis bei aktivierter „Desktopwebsite“ auf dem Smartphone
* Erkennung: Touch-Gerät mit kleinem Bildschirm meldet sich als Desktop-Browser.
*/
add_action( 'wp_footer', function () {
if ( is_admin() || ( function_exists( 'is_checkout' ) && ( is_checkout() || is_cart() ) ) ) {
return;
}
?>
<div id="mek7-dm-hinweis" hidden style="position:fixed;left:12px;right:12px;bottom:12px;z-index:99999;padding:16px 48px 16px 16px;border-radius:12px;background:#15181c;color:#fff;font:16px/1.5 sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.3)">
<strong>Die Seite wirkt sehr klein?</strong><br>
Im Browser ist „Desktopwebsite“ aktiv. Tippen Sie oben rechts auf das Menü (⋮) und entfernen Sie den Haken bei „Desktopwebsite“.
<button type="button" aria-label="Hinweis schließen" style="position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:none;color:#fff;font-size:22px;cursor:pointer">×</button>
</div>
<script>
(function () {
var el = document.getElementById('mek7-dm-hinweis');
try { if (localStorage.getItem('mek7_dm_zu')) { return; } } catch (e) {}
var touch = navigator.maxTouchPoints > 1;
var mobilUA = /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
var klein = Math.min(screen.width, screen.height) < 600;
if (touch && klein && !mobilUA) {
el.hidden = false;
el.querySelector('button').addEventListener('click', function () {
el.hidden = true;
try { localStorage.setItem('mek7_dm_zu', '1'); } catch (e) {}
});
}
})();
</script>
<?php
} );Keine Zeit für Code?
Wir bauen das Snippet in Ihren Shop ein und testen es – zum Festpreis, sicher vor Theme-Updates im Child-Theme oder Snippet-Plugin.
Mobile Desktop-Mode Hint
Vollbild-Fenster mit Anleitung, Texte im Backend, Sichtbarkeit nach Seitentyp und URL-Filter, Erkennung über Client Hints.