Detectar si el navegador admite la posición: fijo

Question

¿Hay algún método confiable para detectar si el navegador es compatible con position fixed?

He encontrado algunas soluciones pero ninguna de ellas parece funcionar bien en todos los navegadores.

Answer 1

Al desarrollar una aplicación móvil con jQuery Mobile tuve el mismo problema. Las cabeceras deberían haber posición fija (si es compatible con el navegador) y la solución se para establecer las cabeceras con un valor predeterminado position: fixed en el css y comprobado la propiedad apoyado a través del siguiente método:

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

el valor devuelto es static si no es compatible con el navegador.

Answer 2

Este código funciona completamente bien. Acabo de probarlo en un cuadro Windows ME con IE6, devuelve 'nulo' porque IE6 no es compatible con position:fixed;.

por cierto, este NO es mi código original. TODOS los créditos van aKangax's Githubquien tiene muchas funciones allí para probar las características del navegador.

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

Si funciona, funciona, si no lo hace, obtendrá un valor nulo.

Answer 3

El código de Ohgodwhy es correcto, pero para iOS, puede consultar el agente de usuario y ver si se trata de iOS Safari. Luego devuelve que sea compatible. Las cadenas de agente de usuario son

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 

No estoy seguro de cómo codificar esto, pero estoy seguro de que esto es lo que hay que hacer para detectar IOS.

Answer 4

¿Algo como esto funciona en los navegadores móviles?

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