javascript - 如何获取浏览器视口(viewport)尺寸？

Question

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

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

Answer 1

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

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 viewport @media (width) 和 @media (height) 包括滚动条
• initial-scale 和缩放 variations可能会导致移动值错误地缩小到 PPK 所称的 visual viewport并且小于 @media 值
• 由于原生四舍五入，缩放可能会导致值偏离 1 像素
• undefined in IE8-

document.documentElement.clientWidth和 .clientHeight

• 等于 CSS 视口(viewport)宽度 减去 滚动条宽度
• 匹配 @media (width) 和 @media (height) 当有 no 滚动条
• same as jQuery(window).width() 其中jQuery 调用浏览器视口(viewport)
• available cross-browser
• inaccurate if doctype is missing

---

资源

• Live outputs for various dimensions
• verge使用跨浏览器视口(viewport)技术
• actual使用 matchMedia 获得任何单位的精确尺寸