如何让CSS mediaqueries与窗口$( jQuery ).innerWidth()协同工作？
如何让CSS mediaqueries与窗口$( jQuery ).innerWidth()协同工作？
提问于 2011-12-12 17:58:44
我尝试让jQuery处理一个菜单，而CSS则在调整浏览器大小时处理窗口背景。
所以jQuery做了这样的事情：
if ( $(window).innerWidth() < mediaQueries['small']) {
// (where 'small' would be 966)
// Perform jQuery stuff on a menu ul
}CSS的内容是这样的：
@media all and (max-width: 966px) {
body {
background: url(smallback.jpg) no-repeat 0 0;
}
}当使用火狐时，有一个17像素的间隙(似乎是垂直滚动条的宽度)，其中jQuery的东西已经被处理了，而CSS却没有。
由于其他浏览器可能会使用不同宽度的滚动条，因此仅将17px添加到CSS并不能真正解决这个问题。那么，怎样才能让jQuery考虑到滚动条呢？$(window).innerWidth()似乎没有为我做这件事。
任何帮助都将不胜感激。
在火狐、歌剧或IE中打开this page，以获取该问题的孤立版本。(Chrome和Safari没有这个问题。到目前为止: Webkit：+1，Gecko：-1，Trident：-1，Presto：-1。)
回答 3
Stack Overflow用户
发布于 2013-08-27 05:02:23
如果您恰好使用的是Modernizr，则可以包含介质查询polyfill，它可以简化介质查询检查，以：
if (Modernizr.mq('all and (max-width: 966px)')) {
...
}它与您的CSS很方便地相同：
@media all and (max-width: 966px) {
...
}如果你不能使用现代的polyfill，那就坚持检查Math.max(document.width, window.innerWidth)。
Stack Overflow用户
发布于 2012-06-27 03:49:36
window.matchMedia是一种当媒体选择器启动或关闭时触发事件的方法。它是新的，所以没有得到广泛的支持，但看起来很有用。
Stack Overflow用户
发布于 2014-03-26 14:33:29
var viewport = jQuery(window).innerWidth();
if( viewport > 979 )
{
// your code here
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8472566
复制相关文章
相似问题