jQuery 和 CSS 媒体查询不同步

Posted 2023-03-06

【中文标题】jQuery 和 CSS 媒体查询不同步

【英文标题】：jQuery and CSS media queries not in sync

【发布时间】：2013-08-10 08:07:02

【问题描述】：

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

如果我有 CSS 媒体查询：

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

还有一些 jQuery：

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

我希望得到以下结果： - 当浏览器调整大小并刷新为 980px 时，以上两个都将被忽略 - 当浏览器调整大小并刷新到 978px 时，以上两个都会激活。

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

谁能解释这里发生了什么？

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

【问题讨论】：

我注意到同样的问题，报告的解决方案都不起作用，两者都返回相同的值，而不是媒体查询似乎读取的值，而且这不是 jquery 相关的问题，因为文档/正文对象包含相同的样式值，有解决方案吗？

好的，刚刚找到原因，我在下面的答案中添加了解决方案。

你试过用body代替window吗？

【参考方案1】：

问题与滚动条宽度有关：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;

【讨论】：

我发誓我已经用谷歌搜索过这个问题一百次了，但我总是忘记这个解决方案。

【参考方案2】：

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

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

而不是轮询文档宽度。

【讨论】：

我在页面上使用了一个不可见的标尺元素，并对其进行了轮询。

【参考方案3】：

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

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

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

【讨论】：

是的，我试过了，它返回的值与我的窗口宽度相同。这也不能解释为什么 CSS 媒体查询迟到了（根据萤火虫给出的宽度）

【参考方案4】：

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

$(window).resize(function() 
  if ($('html').width() <= 979) 
    // Do something
  
);

【讨论】：

好的，这很酷。但我想知道萤火虫是否可能给出不准确的正文宽度，或者 CSS 是否正在读取不同的宽度，因为它启动较晚。可能与滚动条有关？