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: