移动Web开发，4行代码检测浏览器是否支持position:fixed

最新推荐文章于 2024-04-14 16:15:33 发布

WinterWang0207

最新推荐文章于 2024-04-14 16:15:33 发布

阅读量154

点赞数

分类专栏：其他 css

其他同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

var div = document.createElement('div');
div.style.cssText = 'display:none;position:fixed;z-index:100;';
body.appendChild(div);
console.log(window.getComputedStyle(div).position != 'fixed');

对于不支持fixed的浏览器，`window.getComputedStyle(div).position`计算出来的值会是`absolute`。

在这段代码的基础上，可以封装一个公共函数，并将已知的不支持fixed浏览器直接过滤掉。

function isSupportFixed() {
    var userAgent = window.navigator.userAgent, 
        ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/),
        ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) < 5),
        operaMini = /Opera Mini/i.test(userAgent),
        body = document.body,
        div, isFixed;

    div = document.createElement('div');
    div.style.cssText = 'display:none;position:fixed;z-index:100;';
    body.appendChild(div);
    isFixed = window.getComputedStyle(div).position != 'fixed';
    body.removeChild(div);
    div = null;

    return !!(isFixed || ios5below || operaMini);
}

如果不写z-index，浏览器在计算样式时，会将fixed计算成static