8

我一直在尝试了解确定窗口宽度的方式，我想知道 CSS 和 jQuery 是否不同。

例如，如果我有 CSS 媒体查询：

@media (max-width: 979px) {
  /*my css here*/
}

还有一些jQuery：

if ($(window).width() < 979) {
  //my jQuery here
}

我预计会出现以下情况： - 当浏览器调整大小并刷新为 980 像素时，以上两个都将被忽略 - 当浏览器调整大小并刷新为 978 像素时，以上两个都将激活。

然而，我发现 - jQuery 和 CSS 直到大约 964 像素及以下才开始使用。- 有时（如果我启用了 window.resize）jQuery 和 CSS 会以不同的宽度（相隔几个像素）启动。

任何人都可以了解这里发生了什么吗？

顺便说一句，我将窗口宽度基于 Firebug 的布局查看器。

4

4 回答 4

8

问题与滚动条宽度有关：window.innerWidth将返回 CSS 媒体查询读取的正确值。请注意，这$(window).innerWidth()将返回错误的值。

对于跨浏览器解决方案，可以使用如下函数：

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 value = viewport().width;
于 2013-10-24T15:39:37.127 回答
1

有点跑题了，但我假设您正在尝试模仿 javascript 何时触发，因为您想在 css 断点切换的同时做某事。如果您想让 javascript 在媒体查询触发时执行某些操作，我发现轮询由 css 创建的更改是最容易的，而不是试图模仿媒体查询触发的方式（由于报告，这在浏览器中不一致滚动条宽度）。例如，如果在您的断点处， element-x 从position: relativeto position: fixed，您可以通过测试确保您的 javascript 与您的 css 一致

if(elementX.css('position')== 'fixed'){
//code
}

而不是轮询文档宽度。

于 2014-01-31T23:24:37.180 回答
0

媒体查询使用视口宽度。我发现在尝试匹配 CSS 媒体查询时获取 html 宽度要准确得多。使用调整大小：

$(window).resize(function() {
  if ($('html').width() <= 979) {
    // Do something
  }
});
于 2013-08-08T15:20:50.633 回答
0

认为您可能想$(document).width()改用

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

http://api.jquery.com/width/

于 2013-08-08T14:50:23.517 回答