问为什么window.width小于媒体查询中设置的视口宽度

EN

答案是滚动条，解决方案很棘手。

媒体查询很有趣。它们在浏览器之间的行为并不完全相同，这意味着使用它们有时并不容易。例如，OS上的IE10 /-blink和Win8上的Win8，滚动条被覆盖在页面上。然而，在-moz中，滚动条不会覆盖到页面上。获取页面“可视区域”的最佳方法是下面一行普通的JavaScript (假设您有一个有效的HTML )：

document.body.parentNode.clientWidth

这将做的是找到body元素，找到它的父元素(在有效的文档中它将是html元素)，然后在呈现后找到它的宽度。这会给你你感兴趣的宽度。--拥有也是一种无用的宽度。

你可能会问，为什么实际的客户端宽度毫无用处？这并不是因为它因浏览器而异，而是因为它有变化。这是因为这不是width媒体查询实际上正在测试的内容！width媒体查询测试的是window.innerWidth，这正是您现在所使用的内容。

那么，解决这个问题的办法是什么呢？我想说的是，解决方案是使用基于内容的媒体查询，而不是基于设备的媒体查询，并且可以在查询中留有一些回旋余地(特别是如果这种回旋空间大约为1)。15px)。如果您还没有，请阅读令人烦恼的观点和像素身份危机的文章，了解为什么在MQ定义中潜在的15px抖动不是世界上最糟糕的事情(可能还有更大的鱼要做)。

因此，最后，继续使用$breakpoint-to-ems: true并根据内容中断到window.innerWidth的时间选择媒体查询，因为这是处理跨浏览器问题的唯一正确方法。粗略地看一下各种问题，似乎大多数浏览器和OSes都会移动到一个覆盖滚动条(每个OS浏览器都会有一个覆盖滚动条，Ubuntu的统一UI 介绍他们)，所以为了将来的友好起见，我建议不要担心滚动条偏移量，在不同浏览器上的站点看起来略有不同。请记住，正如伊森·马尔科特( Ethan Marcotte )如此雄辩地指出：

网络本身就是一种不稳定的媒介。

这就是对我有用的东西：CSS媒体查询和JavaScript窗口宽度不匹配。

不要使用包含滚动条的$(window).width();，而是获得如下的内部宽度：

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' ] };
}

var vpWidth = viewport().width; // This should match your media query

这是因为scrollbar's

我找到的最正确的解决方案是使用媒体查询将实际窗口大小传递给Javascript。您必须遵循以下步骤：

• 将隐藏元素添加到页面中，
• 使用媒体查询更改该元素的max-width属性，
• 通过Javascript读取该元素的max-width属性。

例如，在页面中添加以下元素：

<div id="currentMedia"></div>

然后编写以下CSS规则：

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    // Make arrows in the carousel disappear...

    #currentMedia {
        max-width: 720px;
    }
}

然后，在Javascript方面，您可以编写：

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Code HERE..
}

不管滚动条大小如何，它都是准确的，因为值来自同一个触发旋转木马消失的媒体查询。

我在最近所有的主要浏览器上测试了这个解决方案，并给出了正确的结果。

您将发现在哪些浏览器在quirksmode.org上的这个页面上上支持哪些属性的大摘要。

您最好的选择可能是抓取页面中的元素(使用支持的document.body，或document.getElementById或其他什么)，遍历其offsetParent链以找到最顶层的元素，然后检查该元素的clientWidth和clientHeight。

innerWidth文档

.innerWidth()方法不适用于window和document对象；对于这些对象，请使用.width()。