UnBounce Editor: Mit JavaScript zwischen Mobile und Desktop unterscheiden

UnBounce ist ein praktischer, aber oft wenig flexibler Editor für einfache Webseiten und Landingpages: Damit lassen sich einzelne Seiten mit wenig Aufwand zusammenklicken und anschließend veröffentlichen. Aktiviert man die mobile Ansicht, unterscheidet UnBounce zwischen Desktop-Computern und mobilen Geräten wie einem Smartphone und einem Tablet: Man kann hier für beide Größen auch komplett unterschiedliche Seiten anlegen.

Oft möchte man aber wissen, ob UnBounce dem Besucher gerade die Desktop-Ansicht anzeigt oder die mobile Version: Neben der Abfrage der Bildschirmgröße lässt sich das auch über die von UnBounce verwendeten Elemente mit JavaScript prüfen.

UnBounce: Mobile- oder Desktop-Ansicht?

Man kann für die mobile und die Desktop-Ansicht einerseits unterschiedliche Element anzeigen. Außerdem kann man auch die Position und Größe der Elemente je nach Auflösung verändern: Das funktioniert nur nicht mit Text-Größen, diese kann UnBounce nicht trennen. Hier hilft dann nur ein eigener, mobiler Text-Block.

Hat eine Box in der Desktop-Ansicht eine Breite von 400 Pixeln, in der mobilen Ansicht aber nur von 200 Pixeln, kann man diesen Wert abfragen. Die Größe legt man in der Eigenschaften-Ansicht rechts fest: Einmal für die Desktop-Ansicht, anschließend für die mobile Ansicht. Je nachdem, ob die Breite der Box jetzt „400px“ oder „200px“ beträgt, zeigt UnBounce dann die Dektop- oder die Mobile-Version.

Wichtig: Dies geht nicht über die Style-Eigenschaft der Box-ID selbst: Diese wird immer als leer angezeigt. Um die Werte eines Elements auszulesen, sollte man daher die Funktionen „getComputedStyle“ und „getPropertyValue“ verwenden!

Funktioniert nicht in UnBounce:

var breite = document.getElementById('lp-pom-box-100').style.width;

Funktioniert mit UnBounce:

var element = document.getElementById("lp-pom-box-100");
var breite = window.getComputedStyle(element, null).getPropertyValue("width");

Dieser Wert enthält dann die Breite eines UnBounce-Elements zusammen mit der Einheit (zum Beispiel „px“): Damit lässt sich dann prüfen, ob die mobile Ansicht oder die Desktop-Variante angezeigt wird:

if(breite == '200px') { alert('Mobile!') }

Die ID eines Elements, über das man den Wert auslesen kann (in dem Code-Beispiel oben ‚lp-pom-box-100‘) erhält man, wenn man das Element auswählt: Sie steht unter „Element Metadata“ ganz unten im rechten Bereich der Seite: