准确确定用户屏幕、浏览器窗口和网页内容的尺寸对于构建响应式和用户友好的 Web 应用程序至关重要。本指南阐明了这三个概念之间的区别，并提供了可靠的 JavaScript 方法来检索它们的各自尺寸。
目录
理解屏幕、窗口和网页尺寸之间的区别
在深入研究代码之前，让我们先明确定义：
- 屏幕：代表用户设备的整个物理显示区域。其尺寸反映了显示器的总像素数。
- 窗口：指的是浏览器窗口本身——显示网页的区域。如果浏览器未最大化，窗口大小可能小于屏幕大小。它不包括浏览器 chrome（工具栏、菜单等）。
- 网页（文档）：包含网页的渲染内容。其尺寸取决于内容的大小、布局和样式。它可能小于或大于浏览器窗口（导致出现滚动条）。
使用 JavaScript 获取屏幕、窗口和网页尺寸
以下是使用 JavaScript 获取这些尺寸的方法：
1. 屏幕尺寸
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
console.log(`屏幕宽度：${screenWidth} 像素`);
console.log(`屏幕高度：${screenHeight} 像素`);
2. 窗口尺寸
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
console.log(`窗口宽度：${windowWidth} 像素`);
console.log(`窗口高度：${windowHeight} 像素`);
3. 网页（文档）尺寸
由于浏览器的不一致性，确定网页的确切尺寸需要更强大的方法。以下函数处理各种情况：
function getDocumentSize() {
const body = document.body;
const html = document.documentElement;
const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
return { width: docWidth, height: docHeight };
}
const documentSize = getDocumentSize();
console.log(`文档宽度：${documentSize.width} 像素`);
console.log(`文档高度：${documentSize.height} 像素`);
此函数考虑不同的属性以应对不同浏览器之间的差异，并确保更准确地测量渲染内容，包括可见视区之外的区域。
通过理解这些差异并使用这些 JavaScript 方法，您可以创建能够无缝适应各种屏幕尺寸和窗口配置的 Web 应用程序。