为什么window.width小于媒体查询中设置的视口宽度
为什么window.width小于媒体查询中设置的视口宽度
提问于 2013-08-31 08:16:36
我很困惑，也不知道如何用恰当的话来解释这一点。到目前为止，我已经使用并设置了带有断点的媒体查询。已使用的断点变量看起来类似于例如：
$menustatictofixed: min-width 900px;$断点到ems设置为true。我已经根据以下jQuery片段的像素值列出了该页面及其所有断点变量：
$('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);
});一切看上去都很正常和干净。但是在过去的一两天里，我遇到了一些问题，比如设置模式的最后断点，并让事情变得可预测。从某种程度上说，那些看似干净而又美好的东西，从逻辑上说，我现在非常怀疑，实际上是不恰当的，而且不知何故是一团糟。因为如果您看一下下面的屏幕截图，窗口的宽度(以Chrome为单位)与使用window.width的jQuery片段的宽度不同。如果我将window.width替换为window.innerWidth以最终排除滚动条，也没有什么区别。获得适当结果的唯一方法是在等式中添加15个像素：
var viewportWidth = $(window).width() + 15;在整个方程中，唯一的问题是，window.width是函数的错误选择，更好的方法是使用document.documentElement.clientWidth或其他东西或.？15像素所代表的是什么，它以一种有点麻烦的方式解决了上面的问题？向拉尔夫问好
Stack Overflow用户
发布于 2013-11-20 20:05:18
这就是对我有用的东西：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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18546067
复制相关文章
相似问题
腾讯云开发者
