JQuery .resize 或媒体查询来获取响应式网站的宽度？
JQuery .resize or Media query to get width for responsive websites?
诚然，我是开发响应式网站的新手。我基于一些断点使用媒体查询实现了一个。在测试期间，我发现使用媒体查询宽度的整个方法存在严重缺陷，因为包含滚动条宽度，除非有一种有意义的方法来动态确定它。从历史上看，这甚至不一致。例如，请参阅 2011 年发布的关于 Whosebug 的 this。
$(window).width() 一致 returns 宽度，没有滚动条。尽管 Jquery 论坛上有一个关于此问题的 discussion，但没有进行任何更改。 既然可以使用 jquery 调整大小事件处理程序，为什么还要使用媒体查询来获取宽度？
我知道我需要在 Jquery 的调整大小事件处理期间处理节流，但使用 setTimeout 和 clearTimeout 很容易做到。
如果需要查找它是否是移动设备，http 请求中的用户代理 and/or screen.width 应该足以获取该信息。
每个浏览器都有不同的滚动条实现。因此，当您获取视口时，不同浏览器的结果会有所不同。
Chrome 和 Safari 排除滚动条尺寸。
Firefox、Opera 和 IE 包括滚动条尺寸。
这就是这里的主要问题，如果我选择：
@media (min-width: 800px) { ... }
Chrome 当主体宽度为 800 像素或更大时，Safari 将包含这些样式。但是，如果您的 OS 显示宽度为 20px 的垂直滚动条，则其他浏览器将包含 780px 的样式。
您可以阅读 this 文章以获得更好的解释。
所以每个浏览器在使用媒体查询时都会给你不同的视口。
但对于每个浏览器，如果你想获得与 css 媒体查询完全一样的视口，请不要使用 jQuery 的宽度和高度，因为它可能因滚动条而不准确。而是使用原生 javascript 变量（window.innerWidth 和 window.innerHeight）这两个变量将为您提供与 css 媒体查询相同的视口。
所以如果 css 媒体查询宽度是 800 像素，window.innerWidth 值也将是 800。但是 $(window).width() 可能不同！
这样你就可以保证视口的值在 css 和 javascript 中是相同的。
当然，由于 20 像素的滚动条差异，每个浏览器的响应式设计行为可能会略有不同，并且您无法在所有浏览器中获得完全相同的结果。但是 20 像素没什么大不了的。
我建议您阅读更多与响应式设计和滚动条问题相关的文章。
这是一个good one
我希望这可以作为您问题的答案。
诚然，我是开发响应式网站的新手。我基于一些断点使用媒体查询实现了一个。在测试期间，我发现使用媒体查询宽度的整个方法存在严重缺陷，因为包含滚动条宽度，除非有一种有意义的方法来动态确定它。从历史上看，这甚至不一致。例如，请参阅 2011 年发布的关于 Whosebug 的 this。
$(window).width() 一致 returns 宽度，没有滚动条。尽管 Jquery 论坛上有一个关于此问题的 discussion，但没有进行任何更改。 既然可以使用 jquery 调整大小事件处理程序，为什么还要使用媒体查询来获取宽度？
我知道我需要在 Jquery 的调整大小事件处理期间处理节流，但使用 setTimeout 和 clearTimeout 很容易做到。
如果需要查找它是否是移动设备，http 请求中的用户代理 and/or screen.width 应该足以获取该信息。
每个浏览器都有不同的滚动条实现。因此，当您获取视口时，不同浏览器的结果会有所不同。
Chrome 和 Safari 排除滚动条尺寸。 Firefox、Opera 和 IE 包括滚动条尺寸。
这就是这里的主要问题，如果我选择：
@media (min-width: 800px) { ... }
Chrome 当主体宽度为 800 像素或更大时，Safari 将包含这些样式。但是，如果您的 OS 显示宽度为 20px 的垂直滚动条，则其他浏览器将包含 780px 的样式。
您可以阅读 this 文章以获得更好的解释。
所以每个浏览器在使用媒体查询时都会给你不同的视口。 但对于每个浏览器，如果你想获得与 css 媒体查询完全一样的视口，请不要使用 jQuery 的宽度和高度，因为它可能因滚动条而不准确。而是使用原生 javascript 变量（window.innerWidth 和 window.innerHeight）这两个变量将为您提供与 css 媒体查询相同的视口。
所以如果 css 媒体查询宽度是 800 像素，window.innerWidth 值也将是 800。但是 $(window).width() 可能不同！
这样你就可以保证视口的值在 css 和 javascript 中是相同的。
当然，由于 20 像素的滚动条差异，每个浏览器的响应式设计行为可能会略有不同，并且您无法在所有浏览器中获得完全相同的结果。但是 20 像素没什么大不了的。
我建议您阅读更多与响应式设计和滚动条问题相关的文章。
这是一个good one
我希望这可以作为您问题的答案。