21

Modernizr 很棒，但示例测试position: fixed非常不完整：

  • iOS 4 及更低版本的退货true，但不支持position: fixed
  • Windows 上的 Opera 在支持时false返回position: fixed

我发现了另一个基于 Modernizr 测试但添加了 iOS 检测的测试：https ://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8 。由于即将推出的 iOS 5 确实支持position: fixed.

你们能帮我找到一种在没有浏览器嗅探的情况下测试iOS中固定位置的方法吗？

// Test for position:fixed support
Modernizr.addTest('positionfixed', function () {
    var test  = document.createElement('div'),
      control = test.cloneNode(false),
         fake = false,
         root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
      }());

   var oldCssText = root.style.cssText;
   root.style.cssText = 'padding:0;margin:0';
   test.style.cssText = 'position:fixed;top:42px';
   root.appendChild(test);
   root.appendChild(control);

   var ret = test.offsetTop !== control.offsetTop;

   root.removeChild(test);
   root.removeChild(control);
   root.style.cssText = oldCssText;

   if (fake) {
      document.documentElement.removeChild(root);
   }

   return ret;
});
4

2 回答 2

1

我为 iOS 编写了这个测试：http: //mnobeta.no/2011/09/test-position-fixed-for-iphone/

这有点混乱，但似乎有效。Android仍然是一个问题，因为它的“假” position:fixed。

于 2011-09-17T15:06:06.137 回答
0

我发现您需要插入一些技巧来获得功能性 positionFixed 测试。例如，我在我的测试中插入了一个 hack，它为运行 v.5 或更高版本的 iOS 设备返回 true：

/*iPhone/iPad Hack*/
if(navigator.userAgent.match(/iPad|iPhone/i) !== null){
    /*Check if device runs iOS 5 or higher*/
    isSupported = navigator.userAgent.match(/[5-9]_[0-9]/) !== null;
}

我不确定这段代码有多“干净”，但它对我有用。

于 2011-10-14T11:26:01.780 回答