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

Question

我很困惑,仍然不确定如何用恰当的话来解释这一点.到目前为止,我已经使用Breakpoint设置了我的媒体查询.使用的断点变量看起来像例如:

$menustatictofixed: min-width 900px;

$ breakpoint-to-ems设置为true.我根据以下jQuery代码段的像素值布置了包含所有Breakpoint变量的页面:

$('body').append('<div style="position: fixed; bottom: 0; right: 0; display: inline-block; font-weight: bold; padding: 5px 7px; border-radius: 5px 0 0 0; background: green; color: white; z-index: 9999;">Viewport width <span id="width"></span> px</div>');
var viewportWidth = $(window).width()
$('#width').text(viewportWidth);
$(window).resize(function() {
  var viewportWidth = $(window).width();
    $('#width').text(viewportWidth);
});

一切看起来都很干净.但是在过去的一两天里,我遇到了为模式设置最后断点并让事情表现出可预测性的问题.在某种程度上,首先看起来干净整洁的东西,我现在在逻辑上非常怀疑,实际上是不合适的,不知何故是一团糟.Cuz,如果你看一下下面的截图,窗口的宽度(在Chrome中)与使用window.width的jQuery代码段的宽度不同.如果我用window.innerWidth替换window.width来最终排除滚动条也没有区别.获得正确结果的唯一方法是在等式中添加15个像素:

var viewportWidth = $(window).width() + 15;

整个方程中唯一的问题是window.width是错误的函数选择,最好是使用例如document.documentElement.clientWidth或其他东西或......？对于15个像素代表什么,以一点点hacky方式修复了上面的问题？最好的问候拉尔夫

Answer 1

这对我有用: 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

Answer 2

答案是滚动条,解决方案很棘手.

媒体查询很有趣.它们在浏览器中的行为并不完全相同,这意味着使用它们有时可能不那么容易.例如,在OS X上的-webkit/-blink和Win8上的IE10中,滚动条覆盖在页面上.但是,在-moz中,滚动条不会覆盖到页面上.获取页面"可查看区域"的最佳方法是使用以下的vanilla JavaScript行(假设您有一个有效的HTML文档):

document.body.parentNode.clientWidth

这样做是找到body元素,找到它的父元素(在有效文档中将是html元素),然后在渲染后找到它的宽度.这将为您提供您有兴趣看到的宽度.这也是一个无用的宽度.

您可能会问,为什么实际客户端宽度无用？这不是因为它因浏览器而异,因为它确实如此.这是因为这不是width媒体查询实际测试的内容!什么width媒体查询测试是 window.innerWidth,这是你在本质上现在使用的是什么.

那么这个问题的解决方案是什么？好吧,我会说解决方案是使用基于内容的媒体查询而不是基于设备的媒体查询,并且在查询中有一些摆动空间(特别是如果那个摆动空间大约是15px).如果您还没有,请阅读文章Vexing Viewports和A Pixel Identity Crisis,以了解为什么15pxMQ定义中的潜在微光不是世界上最糟糕的东西(可能有更大的鱼类可以炒).

因此,最后继续使用$breakpoint-to-ems: true并根据内容何时中断选择媒体查询,window.innerWidth因为它是处理跨浏览器问题的唯一理智方式.从粗略浏览各种问题看,似乎大多数浏览器和操作系统都转移到覆盖滚动条(从Firefox 24开始,每个OS X浏览器都会有一个,Ubuntu的Unity UI 引入它们),所以努力做到未来友好,我建议不要担心滚动条的偏移量,并且浏览器中的网站看起来略有不同.请记住,正如Ethan Marcotte雄辩地提出的那样:

网络本质上是不稳定的媒介

Answer 3

这是因为 scrollbar's

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

• 在页面中添加隐藏元素,
• 使用媒体查询来更改该max-width元素的属性,
• max-width通过Javascript 读回该元素的属性.

例如,将以下元素添加到页面:

<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()改用.