Rileva se il browser supporta la posizione: fisso

Question

Esiste un metodo affidabile per rilevare se il browser supporta position fixed?

Ho trovato alcune soluzioni ma nessuna sembra funzionare correttamente su tutti i browser.

Answer 1

Durante lo sviluppo di un'applicazione mobile con jQuery Mobile ho avuto lo stesso problema. Le intestazioni dovrebbero hanno fissato la posizione (se supportato dal browser) e la soluzione era quella di impostare le intestazioni con un default position: fixed sul CSS e controllato la proprietà sostenuti attraverso il seguente metodo:

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

Il valore restituito è static se non supportato dal browser.

Answer 2

Questo codice funziona perfettamente. Appena testato su una scatola di Windows ME con IE6, restituisce 'null' perché IE6 non supporta position:fixed;.

a proposito, questo NON è originariamente il mio codice. TUTTI i crediti vanno aKangax's Githubche ha molte funzioni lì per testare le caratteristiche del browser.

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; 
} 

Se funziona, funziona, se non lo fa, si otterrà un nullo.

Answer 3

Il codice di Ohgodwhy è corretto, ma per iOS è possibile controllare l'agente utente e verificare se si tratta di Safari iOS. Quindi restituire che è supportato. Le stringhe user agent sono

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 

Non sono sicuro di come codificare questo, ma sono sicuro che questo è ciò che devi fare per rilevare iOS.

Answer 4

Qualcosa di simile funziona sui browser per dispositivi mobili?

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; 
}());