Erkennen, ob der Browser Position unterstützt:

Question

Gibt es eine zuverlässige Methode, um zu erkennen, ob der Browser position fixed unterstützt?

Ich habe einige Lösungen gefunden, aber keine von ihnen scheint in allen Browsern gut zu funktionieren.

Answer 1

Während der Entwicklung einer mobilen Anwendung mit jQuery Mobile hatte ich das gleiche Problem. Die Kopfstücke haben sollte Position fixiert (wenn durch den Browser unterstützt), und die Lösung war es, die Header mit einem Standard position: fixed auf dem CSS eingestellt und überprüft die unterstützten Eigenschaft durch das folgende Verfahren:

function isPositionFixedSupported() { 
    return $('[data-role="header"]').css('position') === 'fixed'; 
} 

Der zurückgegebene Wert ist static wenn nicht vom Browser unterstützt.

Answer 2

Dieser Code funktioniert einwandfrei. Nur getestet auf einem Windows ME-Feld mit IE6, gibt 'Null' zurück, weil IE6 position:fixed; nicht unterstützt.

Übrigens, das ist ursprünglich nicht mein Code. Alle Credits gehen zuKangax's Githubwer hat viele Funktionen dort, um Browser-Funktionen zu testen.

function() { 
    var container = document.body; 
    if (document.createElement && 
    container && container.appendChild && container.removeChild) { 
    var el = document.createElement("div"); 
    if (!el.getBoundingClientRect) { 
     return null; 
    } 
    el.innerHTML = "x"; 
    el.style.cssText = "position:fixed;top:100px;"; 
    container.appendChild(el); 
    var originalHeight = container.style.height, originalScrollTop = container.scrollTop; 
    container.style.height = "3000px"; 
    container.scrollTop = 500; 
    var elementTop = el.getBoundingClientRect().top; 
    container.style.height = originalHeight; 
    var isSupported = elementTop === 100; 
    container.removeChild(el); 
    container.scrollTop = originalScrollTop; 
    return isSupported; 
    } 
    return null; 
} 

Wenn es läuft, es funktioniert, wenn es nicht der Fall ist, werden Sie ein Null erhalten.

Answer 3

Ohgodwhy's Code ist korrekt, aber für iOS, können Sie den User Agent überprüfen und sehen, ob es die iOS Safari ist. Dann gebe zurück, dass es unterstützt wird. Die User-Agent-Strings sind

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 
Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7 

Ich bin nicht sicher, wie dies zu codieren, aber ich bin sicher, das ist, was Sie erkennen iOS tun müssen.

Answer 4

Funktioniert so etwas in mobilen Browsern?

function isFixedPositionSupported() { 
    var e = document.createElement('div') 
    try { 
     e.style.position = 'fixed' 
     return e.style.position == 'fixed' 
    } catch (exception) { 
     return false 
    } 
} 

Answer 5

var supportFixed = (function() { 
    var elem = document.createElement('div'); 
    elem.style.cssText = 'position:fixed'; 
    if (elem.style.position.match('fixed')) return true; 
    return false; 
}());