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

Comments

Projects
None yet
@maxzhang
Owner

maxzhang commented Sep 25, 2013

重定向: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

This comment has been minimized.

cssmagic commented Sep 30, 2013

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

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

@sixwinds

This comment has been minimized.

sixwinds commented Apr 11, 2014

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

@maxzhang

This comment has been minimized.

Owner

maxzhang commented Apr 11, 2014

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

@sixwinds

This comment has been minimized.

sixwinds commented Apr 11, 2014

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

@rambo-panda

This comment has been minimized.

rambo-panda commented Jul 15, 2014

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

@smallmacro

This comment has been minimized.

smallmacro commented Aug 18, 2014

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

@helihui7758

This comment has been minimized.

helihui7758 commented Aug 23, 2014

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

@acterce

This comment has been minimized.

acterce commented Oct 24, 2014

点赞~

@maxzhang maxzhang closed this Jun 18, 2015

@samhou1988

This comment has been minimized.

samhou1988 commented Jun 25, 2015

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

@oddjohn

This comment has been minimized.

oddjohn commented Jul 9, 2015

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

@zhujunwei

This comment has been minimized.

zhujunwei commented Dec 3, 2015

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

@Mmzer

This comment has been minimized.

Mmzer commented Sep 13, 2016

m

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