7

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

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

4

5 回答 5

9

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

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

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

于 2012-09-12T17:46:28.847 回答
3

这段代码工作得很好。刚刚在带有 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;
}

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

于 2012-06-22T14:36:47.230 回答
2 
var supportFixed = (function () {
    var elem = document.createElement('div');
    elem.style.cssText = 'position:fixed';
    if (elem.style.position.match('fixed')) return true;
    return false;
}());
于 2013-07-02T09:07:56.760 回答
1

像这样的东西在移动浏览器上有效吗？

function isFixedPositionSupported() {
   var e = document.createElement('div')
   try {
      e.style.position = 'fixed'
      return e.style.position == 'fixed'
   } catch (exception) {
      return false
   }
}
于 2012-06-25T11:14:01.073 回答
-1

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 所需要做的。

于 2012-06-22T15:35:47.157 回答