Position fixed bei mobilen Endgeräten

Fixe oder absolute Position der Cookie-Hinweise?

Auf der vorausgehenden Seite haben wir versucht die Vor- und Nachteile von Opt-in und Opt-out Lösungen zu beleuchten und sind auf allgemeine Fragen betreffend der Umsetzung einer Richtlinie von Google betreffend Cookies eingegangen. Auf dieser Seite folgen einige Vermerke zur Positionierung der Cookie-Hinweise, da insbesondere die CSS Position fixed bei mobilen Endgräten mit Problemen verbunden ist.

Übersicht – Zustimmung zur Nutzung von Cookies:

• Cookie-Richtlinie (Hinweise zur Nutzung von Cookies)
• Position der Hinweise (Position fixed bei mobilen Endgeräten)
• Eine simple Variante (für beliebige Webseiten mit Position top)
• Eine erweiterte Variante (für beliebige Webseiten mit Position fixed)
• Ein finales Script (mit zusätzlichen Erweiterungen als dritte Variante)
• Als Plugin für WP (plus Download aller Varianten)

Allgemeines zur CSS Position fixed bei mobilen Endgräten

Einblendungen zur Bestätigung werden gern mit der CSS-Eigenschaft Position und dem Wert fixed positioniert. Der Vorteil einer fixed Positionierung besteht darin, dass Einblendungen beim Scrollen im sichtbaren Bereich verbleiben. Mit zusätzlichen Angaben, wie left, top oder bottom und einen entsprechenden Wert, wird nicht die Position innerhalb eines Dokumentes bestimmt, sondern die Position innerhalb des geöffneten Fensters. Es sei angemerkt, die im Fenster für das Dokument zur Verfügung stehende Fläche wird häufig als Viewport bezeichnet.

Leider hat position:fixed einen Nachteil. So wird die Eigenschaft zwar von allen neuzeitlichen Desktop-Browsern unterstützt, nicht aber unbedingt von allen mobilen Endgeräten. Als Beispiel sei das Betriebssystem Android 2.1 erwähnt, welche noch keine Unterstützung für Position fixed bietet und Android 2.3, welches Position fixed nur unterstützt, so lange eine Seite nicht gezoomt wird. Weitere Beispiele unter [1].
Neuere mobile Endgeräte und deren Browser unterstützen zwar eine fixed Positionierung besser, nur leider kann man sich nicht darauf verlassen[2], wobei der Grund eigentlich recht simpel ist. Eine Webseite mit einem responsiven Design wird sich an einem Viewport anpassen und mit einem Zoomlevel von 1 angezeigt. So lange zusätzlich nicht gezoomt wird, sollte Position fixed keine Probleme bereiten.
Anders sieht es bei einer Webseite aus, deren Design noch nicht responsive gestaltet wurde. Diese Seite würde zuerst skaliert werden, um die Seite an den Viewport anzupassen. Der Zoomlevel würde bei einer skalierten Webseite ohne responsiven Design jedoch nicht bei 1 liegen, sondern, da die Seite ja auf die Größe des Viewports “geschrumpft” wird, irgendwo zwischen 0,3 und 0,9. Der Browser rechnet dabei alle Pixelangaben entsprechend der Pixeldichte um. Wird nun gezoomt, würden die umgerechneten Werte nicht mehr stimmen.

Nachfolgend ein einfaches Script, mit dem Sie den Zoomlevel bestimmen können. So lange sich die Werte vom Zoomlevel und dem Verhältnis von der Weite des Viewports geteilt durch die Weite des HTML-Bereiches deckten, bereitete Position fixed bei durchgeführten Tests keine Probleme. Ergaben sich jedoch Unterschiede, verhielten sich mit fixed positionierte Elemente nicht mehr wie erwartet.

Zoomlevel

Bei einer Webseite mit einem responsiven Design sollte die Weite von Offset sich bei Desktop-Browsern nur um die Breite einer Scroll-Leiste verringern bzw. um diese Breite von window.­innerWidth unterscheiden. So richtig interessant werden die Werte jedoch erst, wenn eine nicht responsive Seite mobil getestet wird.

<script type="text/javascript">
"use strict";

if (window.addEventListener) {
    window.addEventListener("load", blendeLevelEin, false);
}
function blendeLevelEin() {

    var html_weite = document.getElementsByTagName("html")[0].offsetWidth;
    var screen_we  = screen.availWidth;
    var fensterwe  = window.innerWidth;

    var zoom_level = (screen_we/fensterwe).toFixed(3);
    var html_ratio = (screen_we/html_weite).toFixed(3);

    document.getElementById("zoomlevel").innerHTML = "<b>Einige Werte:<\/b><br \/>" +
    " <br \/>" +
    " offsetWidth:       " + html_weite + "px<br \/>" +
    " screen.availWidth: " + screen_we  + "px<br \/>" +
    " window.innerWidth: " + fensterwe  + "px<br \/>" +
    " <br \/>" +
    " Zoomlevel:  " + zoom_level + "<br \/>" +
    " HTML-Ratio: " + html_ratio;

    window.setTimeout(blendeLevelEin, 600);
}
</script>

Bitte beachten, dieses Script wird nur dann seine Aufgabe erfüllen, wenn über dem Script ein Div-Bereich mit der id=”zoomlevel” notiert wurde.

Webverweise:

1. Position fixed bei mobilen Endgeräten – bradfrost.com/…
2. Position fixed und Probleme in mobilen Browsern – community.contao.org/…