获取浏览器视口尺寸的方法

Question

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

或者更好的是，使用 JavaScript 的浏览器的视口大小？请参阅此处的绿色区域：

Answer 1

jQuery 维度函数

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

Answer 2

跨浏览器 @media（宽度）< /code> 和 @media（高度） 值

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（宽度）< /code> 和 @media (height) 其中包括滚动条
• initial-scale 和缩放变化可能会导致移动错误缩小到 PPK 所谓的视觉视口的值并且小于@media值
• 由于本机舍入，缩放可能会导致值缩小 1 像素
• 在 IE8 中未定义-

document.documentElement .clientWidth 和 .clientHeight

• 等于 CSS 视口宽度减去滚动条宽度
• 当没有滚动条时，匹配@media（宽度）和@media（高度）
• 相同 jQuery(window).width() jQuery 调用 浏览器视口
• 可用的跨浏览器
• 如果缺少文档类型则不准确

---

资源

• 各种维度的实时输出
• verge 使用跨浏览器视口技术
• actual使用matchMedia来获取精确的任何单位的尺寸