$(window).width()与媒体查询不一样

我在一个项目上使用Twitter Bootstrap。除了默认的引导样式外，我还添加了一些自己的引导样式

//My styles
@media (max-width: 767px)
{
    //CSS here
}

当viewport的宽度小于767px时，我还使用jQuery来改变页面上某些元素的顺序。

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

我遇到的问题是，由$(window).width()计算的宽度和由CSS计算的宽度似乎不一样。当$(window).width()返回767时，css计算它的视口宽度为751，因此似乎有16px的不同。

有人知道是什么导致了这个问题吗?我该如何解决这个问题?人们建议不考虑滚动条的宽度，使用$(window). innerwidth() < 751是正确的方法。然而，理想情况下，我想找到一个解决方案，计算滚动条的宽度，这是与我的媒体查询一致(例如，这两个条件都检查值767)。因为不是所有浏览器的滚动条宽度都是16px?

当前回答

也许更好的做法是不对文档的宽度进行js作用域，而是通过css @media查询进行某种更改。使用这种方法，你可以确保JQuery函数和css的变化是同时发生的。

css:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jquery:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

2014-03-25 16:57:15

其他回答

这是前面提到的依赖于通过CSS更改内容并通过Javascript读取的方法的替代方法。这种方法不需要窗口。matchMedia或Modernizr。它也不需要额外的HTML元素。它通过使用HTML伪元素来“存储”断点信息:

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

我以body为例，你可以使用任何HTML元素。您可以在伪元素的内容中添加任何字符串或数字。不一定要“移动”等等。

现在我们可以通过以下方式从Javascript中读取这些信息:

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

通过这种方式，我们总是可以确保断点信息是正确的，因为它直接来自CSS，我们不需要通过Javascript来获得正确的屏幕宽度。

2016-04-18 13:40:57

也许更好的做法是不对文档的宽度进行js作用域，而是通过css @media查询进行某种更改。使用这种方法，你可以确保JQuery函数和css的变化是同时发生的。

css:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jquery:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

2014-03-25 16:57:15

我做什么;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...

然后在任意位置调用width变量。

您需要将getWidth()放在文档主体中，以确保计算滚动条宽度，否则浏览器的滚动条宽度将从getWidth()中减去。

2019-12-29 14:50:51

这可能是由于滚动条，使用innerWidth代替width喜欢

if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

你也可以得到视图

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

以上代码来源

2013-10-10 09:31:17

Use

window.innerWidth

这解决了我的问题

2015-01-13 21:23:50

$(window).width()与媒体查询不一样

推荐文章

最新文章

标签