Question

有没有可靠的方法来检测浏览器是否支持position fixed？

我找到了一些解决方案，但它们似乎都不适用于所有浏览器。

Answer 1

在使用jQuery Mobile开发移动应用程序时，我遇到了同样的问题。标题应该有固定的位置（如果浏览器支持），解决方案是在css上使用默认的position: fixed设置标题，并通过以下方法检查支持的属性：

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

如果浏览器不支持，则返回值为static。

Answer 2

此代码完全正常。刚刚在带有IE6的Windows ME盒子上测试它，返回'null'，因为IE6不支持position:fixed;。

顺便说一下，这本来不是我的代码。所有学分都转到 Kangax's Github ，其中有许多功能来测试浏览器功能。

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

如果它运行，它可以工作，如果没有，你将得到一个空值。

Answer 3

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

Answer 4

此类内容适用于移动浏览器吗？

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

Answer 5

Ohgodwhy的代码是正确的，但对于iOS，您可以检查用户代理并查看它是否是iOS Safari。然后返回它是否受支持。用户代理字符串是

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

我不确定如何对此进行编码，但我确信这是您需要检测iOS的方法。

检测浏览器是否支持position：fixed

5 个答案: