$(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?

当前回答

Use

window.innerWidth

这解决了我的问题

2015-01-13 21:23:50

其他回答

下面是处理媒体询问的一个不太复杂的技巧。跨浏览器支持有点受限，因为它不支持移动IE。

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

有关更多细节，请参阅Mozilla文档。

2015-04-08 17:27:40

如果你想每1秒检查一次屏幕宽度，你可以这样做

 setInterval(function() {
        if (window.matchMedia('(max-width: 767px)').matches) {
            alert('here')
        } else {
            alert('i am ')
        }
    }, 1000);

2020-12-19 07:00:56

Javascript提供了不止一种方法来检查视口宽度。如您所注意到的，innerWidth不包括工具栏宽度，而且工具栏宽度在不同的系统中是不同的。还有outerWidth选项，它将包括工具栏宽度。Mozilla Javascript API声明:

窗口。outerWidth获取浏览器窗口外部的宽度。它表示包括边栏在内的整个浏览器窗口的宽度 (如果展开)，窗口chrome和窗口调整边框/句柄。

javascript的状态是这样的，我们不能在每个平台上的每个浏览器中都依赖于outerWidth的特定含义。

outerWidth在旧的移动浏览器上没有很好的支持，尽管它在主流桌面浏览器和大多数更新的智能手机浏览器上都得到了支持。

正如ausi所指出的，matchMedia将是一个很好的选择，因为CSS更好地标准化了(matchMedia使用JS读取CSS检测到的视口值)。但是，即使有了公认的标准，弱电的浏览器仍然会忽略它们(在这种情况下，IE < 10，这使得matchMedia至少在XP消失之前不是很有用)。

总之，如果您只针对桌面浏览器和更新的移动浏览器进行开发，那么outerWidth应该能够满足您的需求，但也有一些注意事项。

2014-03-31 06:51:51

试试这个

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}

2019-11-05 07:46:19

这可能是由于滚动条，使用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

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

推荐文章

最新文章

标签