javascript - 位置特征检测：固定

Question

我试图找到一个脚本来检测设备是否position: fixed相对于 ViewPort 而不是整个文档放置元素。

目前，标准桌面浏览器和 Mobile Safari（适用于 iOS 5）这样做，而 Android 设备相对于整个文档放置固定元素。

我找到了一些测试来检测这一点，但似乎没有一个有效：

http://kangax.github.com/cft/当我从 Android 设备传递它时给我一个误报。
https://gist.github.com/1221602当我在装有 iOS 5 的 iPhone 中传递它时给了我一个假阴性。

有人知道在哪里可以找到/如何编写实际检测到的测试吗？我不想依赖浏览器嗅探。

score 9 · Accepted Answer

根据Modernizr的贡献者的说法，如果不检测正在使用的浏览器，您将无法执行此操作。贡献者在该领域相当成熟。

position: fixed在 iOS 和 Android 设备上的测试列在Modernizr 项目的Undetectables wiki 页面下。

MobileHTML5网站列出了对position:fixed. http://mobilehtml5.org/

score 5 · Accepted Answer

实际上，Filament Group 的人用他们的 Fixedfixed 做了一件聪明的事，将已知误报的用户代理字符串放入他们的测试中。

检查它@ http://github.com/filamentgroup/fixed-fixed

有人也可以用一些假阴性来完成它，并使其成为一个现代化的附加功能测试。

score 1 · Accepted Answer

我创建了另一个检查position:fixed浏览器是否真的支持。它创建固定的 div 并尝试滚动并检查 div 的位置是否改变。

function isPositionFixedSupported(){
    var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>");
    el.appendTo("body");

    var prevScrollTop = jQuery(document).scrollTop();
    var expectedResult = 1+prevScrollTop;
    var scrollChanged = false;

    //simulate scrolling
    if (prevScrollTop === 0) {
        window.scrollTo(0, 1);
        expectedResult = 2;
        scrollChanged = true;
    }

    //check position of div
    suppoorted = (el.offset().top === expectedResult);

    if (scrollChanged) {
        window.scrollTo(0, prevScrollTop);
    }

    el.remove();

    return suppoorted;
}

此功能在 Firefox 22、Chrome 28、IE 7-10、Android Browser 2.3 中进行了测试。

javascript - 位置特征检测：固定

3 回答 3

Related

Reference