JQuery .resize 或媒体查询来获取响应式网站的宽度？

Question

诚然，我是开发响应式网站的新手。我基于一些断点使用媒体查询实现了一个。在测试期间，我发现使用媒体查询宽度的整个方法存在严重缺陷，因为包含滚动条宽度，除非有一种有意义的方法来动态确定它。从历史上看，这甚至不一致。参见 this例如，在 2011 年发布的 stackoverflow 上。

$(window).width() 始终返回没有滚动条的宽度。虽然有一个 discussion Jquery 论坛上关于这个问题，没有做任何修改。 既然可以使用 jquery resize 事件处理程序，为什么还要使用媒体查询来获取宽度呢？

我知道我需要在 Jquery 的调整大小事件处理期间处理节流，但使用 setTimeout 和 clearTimeout 很容易做到这一点。

如果需要查找它是否是移动设备，http 请求中的用户代理和/或 screen.width 应该足以获取该信息。

Answer 1

每个浏览器都有不同的滚动条实现。因此，当您获取视口(viewport)时，不同浏览器的结果会有所不同。

Chrome 和 Safari 不包括滚动条尺寸。Firefox、Opera 和 IE 包括滚动条尺寸。

这就是这里的主要问题，如果我选择:

@media (min-width: 800px) { ... }

当主体宽度为 800 像素或更大时，Chrome 和 Safari 将包含这些样式。但是，如果您的操作系统显示宽度为 20px 的垂直滚动条，则其他浏览器将包含 780px 的样式。

你可以阅读 this文章以获得更好的解释。

所以每个浏览器在使用媒体查询时都会给你不同的视口(viewport)。但是对于每个浏览器，如果你想获得与 css 媒体查询完全一样的视口(viewport)，请不要使用 jQuery 的宽度和高度，因为它可能因为滚动条而不准确。而是使用原生 javascript 变量(window.innerWidth 和 window.innerHeight)，这两个变量将为您提供与 css 媒体查询相同的视口(viewport)。

因此，如果 css 媒体查询宽度为 800 像素，window.innerWidth 值也将为 800。但 $(window).width() 可能不同!

这样你就可以保证 viewport 的值在 css 和 javascript 中是相同的。

当然，由于 20 像素的滚动条差异，每个浏览器的响应式设计可能会有所不同，并且您不可能在所有浏览器上都获得完全相同的结果。但 20 像素没什么大不了的。

我建议你阅读更多与响应式设计和滚动条问题相关的文章。

这是一个good one

我希望这可以作为您问题的答案。