javascript - 使用 javascript 的浏览器检测在刷新时失败

Question

我正在尝试检测不支持position:fixed 的设备。编辑:我已经修复了代码，因此它正在检测功能而不是浏览器/操作系统检测。

我想我第一次打出来的时候让人们感到困惑。当我刷新页面时，我的问题开始发挥作用。高度计算不正确，我知道这是一个完全不同的问题，但我仍然在寻求帮助。

更新了下面的检测脚本:

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


    //TEST FOR MOBILE, SET TOP IMAGE TO RELATIVE
    if(fixed()) {
        image_height = jQuery("#outer_homepage_image").height() - 45;
        jQuery("#content").css("top",image_height);

        jQuery(window).resize(function() {
            image_height = jQuery("#outer_homepage_image").height() - 45;
            alert(image_height);
            jQuery("#content").css("top",image_height);
        });
    } else {
        jQuery("#outer_homepage_image").css("position","relative");
    }

Answer 1

这是一件极其脆弱且考虑不周的事情。

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {

例如，iOS 从 iOS 4 开始就完全支持 position:fixed。我们现在使用的是 6。对于 Android 和 Blackberry，我不确定，但会在“支持”方面犯错。

您需要测试功能，而不是用户代理。正如我所说，您可能拥有一台不支持它的 iOS 设备和另一台支持它的设备。事实上，现在大多数人都这样做。

这里有一个有用的链接，可以引导您做出道德、敬虔的选择:http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED