Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
maxzhang opened this issue Sep 25, 2013 · 12 comments
Closed

Comments

@maxzhang
Copy link
Owner

重定向:http://www.maxzhang.com/2013/07/%E7%A7%BB%E5%8A%A8%E7%AB%AFweb%E9%A1%B5%E9%9D%A2%E4%BD%BF%E7%94%A8position-fixed%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/


不废话,直接上代码

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);
}
@cssmagic
Copy link

这个方法确实比较周全,教科书般的特性检测。

我自己的项目里是直接用黑名单,简单粗暴搞定了,哈哈:
https://github.com/cssmagic/CMUI/blob/master/src/js/ext-core.js#L189

@sixwinds
Copy link

请教下为啥检测的div一定要设置z-index

@maxzhang
Copy link
Owner Author

@sixwinds 具体我也忘记了,时间太久。好像是如果不写z-index,浏览器在计算样式时,会将fixed计算成static

@sixwinds
Copy link

@maxzhang google了下没有找到fixed会被计算成static,只发现了这个类似fixed不work的问题: http://stackoverflow.com/questions/19254146/position-fixed-not-working-in-mobile-browser

@rambo-panda
Copy link

貌似现在所有浏览器都支持fixed定位(包括用你的方法显示也都是支持) 但是国内许多浏览器对fixed的支持表现 真的是杂乱无章啊 有点仅仅是显示fixed 但是真正用的时候 却是一塌糊涂。 这才是最无奈的地方。我们更多的时候只能用户特性来检测。表现在页面上的行为很难控制的。

@smallmacro
Copy link

http://bradfrostweb.com/blog/mobile/fixed-position/ 贴一个总结position:fixed的文章。

@helihui7758
Copy link

非常感谢分享技术 必须32个赞

@biubio
Copy link

biubio commented Oct 24, 2014

点赞~

@samhou1988
Copy link

近期项目的开发遇到类似的问题,很实用的代码

@oddjohn
Copy link

oddjohn commented Jul 9, 2015

为什么要不div append到body?不append的话,直接判断div.style.position会有什么问题吗?

@zhujunwei
Copy link

@oddjohn 不添加该方法返回"";

@bytemofan
Copy link

m

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests