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

小编典典

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

all

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

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

当视口的宽度小于 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计算的宽度和CSS计算的宽度似乎不一样。当$(window).width()返回 767
时，css 将其视口宽度计算为 751，因此似乎有 16px 的差异。

有谁知道是什么原因造成的以及我该如何解决这个问题？人们建议不考虑滚动条的宽度，而使用$(window).innerWidth() < 751是要走的路。但是理想情况下，我想找到一个计算滚动条宽度并且与我的媒体查询一致的解决方案（例如，两个条件都检查值
767）。因为肯定不是所有的浏览器都有 16px 的滚动条宽度？

阅读 67

2022-07-01

共1个答案

小编典典

如果您不必支持 IE9，您可以使用window.matchMedia()（MDN
文档）。

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMedia与 CSS 媒体查询完全一致，浏览器支持相当不错：http
://caniuse.com/#feat=matchmedia

更新：

如果你必须支持更多的浏览器，你可以使用Modernizr 的 mq
方法，它支持所有能够理解 CSS 中媒体查询的浏览器。

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

2022-07-01