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

检测浏览器视口尺寸

问题：

如何使用 JavaScript 确定浏览器的视口大小？此信息对于根据可用显示区域优化图像质量特别有用。

解决方案：

获取浏览器视口尺寸的方法有多种：

跨浏览器：@media（宽度）和@media（高度）值

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

window.innerWidth 和 window.innerHeight

属性：

• 检索 CSS 视口尺寸，包括滚动条
• 由于初始规模和原因，在移动设备上可能不可靠Zoom

document.documentElement.clientWidth 和 .clientHeight

属性：

• CSS 视口宽度减去滚动条宽度
• 匹配 @media 尺寸，但没有滚动条
• 跨浏览器支持
• 没有文档类型不准确

资源：

• [各种实时输出维度](https://jsfiddle.net/ariya/tvn3d/)
• [Verge](https://github.com/ryanseddon/verge)
• [actual.js]( https://github.com/jsdom/actual)

以上是如何使用 JavaScript 获取浏览器视口尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！