zoukankan      html  css  js  c++  java
  • 移动Web开发,4行代码检测浏览器是否支持position:fixed

    不废话,直接上代码

    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+OSs([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);
    }
  • 相关阅读:
    设计模式
    设计模式
    设计模式
    JS | Reduce
    JS | 数组的深拷贝与浅拷贝
    JS | 数组操作
    Lodash | 指定路径对Object操作
    Git | 场景总结
    ES6 Class
    SpringBoot | Jpa @Id @GeneratedValue
  • 原文地址:https://www.cnblogs.com/hupan508/p/4916486.html
Copyright © 2011-2022 走看看