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

2022-08-29 22:14:00

我想为我的访问者提供高质量图像的能力,有什么方法可以检测窗口大小吗?

或者更好的是,使用JavaScript的浏览器的视口大小?在此处查看绿色区域:


答案 1

跨浏览器@media(宽度)@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 and window.innerHeight

  • 获取 CSS 视口,其中包含滚动条@media (width)@media (height)
  • initial-scale缩放变化可能会导致移动值错误地缩小到 PPK 所谓的可视视视口,并且小于值@media
  • 缩放可能会导致值由于本机舍入而偏离 1px
  • undefined在 IE8 中-

document.documentElement.clientWidth.clientHeight


资源


答案 2

jQuery 维度函数

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