检测浏览器是否支持position:fixed属性

Question

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

我找到了一些解决方案，但似乎没有一个能在所有浏览器上都很好地工作。

- Diogo Cardoso

---

你是指类似于“粘性页脚”之类的东西吗？ - Roko C. Buljan

Answer 1

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

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

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

- psergiocf

Answer 2

这段代码运行得非常好。在一个安装了IE6的Windows ME盒子上进行了测试，返回了“null”，因为IE6不支持 position:fixed;。

顺便说一下，这并不是我的原创代码。所有的功劳归功于 Kangax的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;
}

如果它能运行，那就是有效的；如果不能，你将会得到一个 null。

- Ohgodwhy

---

这是因为IOS5很难搞。请参阅有关position:fixed和jQM的最新版本的文档。 - Ohgodwhy

这是唯一已知的问题吗？在iOS 5中使用此方法后跟异常是否安全？ - Diogo Cardoso

@Diogo 在生活中只有两件事是确定的：死亡和税收。话虽如此，考虑到 JQM 的文档，似乎你可以为 iOS5 创建一个例外。 - Ohgodwhy

你能否更具体地说明在创建 iOS 5 异常时应该使用 jQuery Mobile 的哪些功能？ - Diogo Cardoso

如果(navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i) ){ alert('iOS5')}看看这是否奏效？ - Ohgodwhy

这段代码在Android原生浏览器上无法正常工作。在新页面视图中，它会导致页面向下滚动。 - Nir

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

- yckart

---

这对我来说似乎是最好的解决方案。为了安全起见，我使用了 jQuery。var $test = $("<div style='display:none;'></div>");$("body").append($test);$test.css("position", "fixed");var supportFixed = $test.css("position") === "fixed";$test.remove(); —— 但这并没有解决我的问题。iOS4 声称支持 fixed，但实际上不支持。 - user2102611

由于其对position:fixed的伪支持，iPad上会出现误报。 - nebulousGirl

Answer 4

这种东西在移动浏览器上能用吗？

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

- Leonid

---

适用于Firefox和Chrome。 - fred727

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。

- W Biggs

---

设备嗅探不是也永远不会是一种可靠的方式，在所有浏览器中进行特性检测。 - user2867288