协慌网

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

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

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

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

window.innerWidth和.innerHeight

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

document.documentElement.clientWidth和.clientHeight

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

资源资源

• 各种尺寸的实时输出
• 边缘使用跨浏览器视口技术
• 实际使用matchMedia获取任何单位的精确尺寸

jQuery 维度函数

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

您可以使用window.innerWidth和window.innerHeight属性。