Modernizr 位置固定测试不完整

发布于 2024-11-15 03:25:18 字数 1387 浏览 2 评论 0原文

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

原文

Modernizr is great but the example test for position: fixed is quite incomplete:

iOS 4 and lower returns true while it doesn't support position: fixed
Opera on Windows returns false while it does support position: fixed

I found another test based on the Modernizr test but with iOS detection added: https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8.
It isn't really future proof since the upcoming iOS 5 does support position: fixed.

Can you guys help me find a way to test position fixed in iOS without browser sniffing?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你的往事 2024-11-22 03:25:18

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

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

回复收藏 0 原文

半透明的墙 2024-11-22 03:25:18

我发现您需要插入一些技巧才能获得功能位置固定测试。例如，我在测试中插入了一个 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;
}

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

I have found that you need to insert some hacks to get a functional positionFixed test. For example i have inserted a hack into my test that returns true for iOS deviced running v.5 or above:

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

I'm not sure how "clean" this code is, but it does the trick for me.

回复收藏 0 原文

~没有更多了~