如何获取浏览器视口尺寸？

Question

我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口大小吗？

或者更好的是，JavaScript 浏览器的视口大小？在此处查看绿色区域：

原文由 Alix Axel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

跨浏览器 @media (width) 和 @media (height) 值

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
 const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidth 和 window.innerHeight

• 获取包含滚动条的 CSS 视口 @media (width) 和 @media (height)

• initial-scale 和缩放 变化 可能会导致移动值 错误地 缩小到 PPK 所称的 视觉视口 并小于 @media 值

• 由于本机舍入，缩放可能会导致值偏离 1px

• 在 IE8 中 undefined -

document.documentElement.clientWidth 和 .clientHeight

• 等于 CSS 视口宽度 减去 滚动条宽度

• 当 没有 滚动条时匹配 @media (width) 和 @media (height)

• 与 jQuery 调用 浏览器视口的 jQuery(window).width() 相同

• 可用的跨浏览器

• 如果缺少 doctype，则不准确

---

资源

• 各种维度的实时输出

• 边缘 使用跨浏览器视口技术

• 实际 使用 matchMedia 来获得任何单位的精确尺寸

原文由 ryanve 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

jQuery 维度函数

$(window).width() 和 $(window).height()

原文由 Scott Evernden 发布，翻译遵循 CC BY-SA 3.0 许可协议