计算窗口宽度包括滚动条- CSS媒体查询vs. JS

Calculate window width including scrollbar - CSS Media queries vs. JS

本文关键字：媒体 CSS 查询 vs JS 滚动条 窗口 包括 计算      更新时间：2023-09-26

假设我已经正确地推断了这个问题，似乎CSS min-screen的宽度补偿了滚动条(如预期的那样)，而JS似乎没有做同样的事情:(

我在Mac OSX上使用Firefox。我不确定这是否是浏览器特定的，但我想知道是否有一个通用的解决方案来解决这个问题。

我做了一个JS小提琴来演示这个问题。在我的浏览器中，CSS和我的JS计算的宽度之间有15px的差异。

有人遇到过这个吗?

我似乎已经找到了我的问题的答案，虽然我不确定这是否是计算正确宽度的最有效方法。

我们的想法是给body元素overflow:hidden;，然后运行函数计算窗口宽度，然后删除overflow:hidden;样式。

一样:

function minScreen480(){
    document.body.style.overflow = "hidden";
        if ($(window).width() >= 480) {
            // Do stuff
        }else{
            // Do stuff
        }
    document.body.style.overflow = "";
}
$(window).resize(function(){
    minScreen480();
}).trigger('resize');

似乎有效。这篇文章还能写得更好吗?

相关文章：