获取屏幕、窗口和网页尺寸, 用JavaScript

牙叔教程 简单易懂

原文 How to Get the Screen, Window, and Web Page Sizes in JavaScript

要检测浏览器窗口是横向模式还是纵向模式，可以比较浏览器窗口的宽度和高度。

但是根据我的经验，在这一系列尺寸中很容易混淆：屏幕、窗口、网页尺寸。

我将在本文中讨论这些尺寸的定义以及如何访问它们。

目录

• 1. 屏幕

• • 1.1 屏幕大小
  • 1.2 可用屏幕大小

• 2. 窗口

• • 2.1 窗口外部大小
  • 2.2 窗口内部大小

• 3. 网页尺寸
• 4. 总结

1. 屏幕

1.1 屏幕大小

屏幕大小 是屏幕（显示器或移动屏幕）的宽度和高度。

window.screen 是保存屏幕尺寸信息的对象。以下是访问屏幕宽度和高度的方法：

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

1.2 可用屏幕大小

可用屏幕大小 包括活动屏幕的宽度和高度，不包括操作系统工具栏。

要访问可用屏幕大小，可以再次使用 window.screen 对象：

const availScreenWidth = window.screen.availWidth;
const availScreenHeight = window.screen.availHeight;

2. 窗口

2.1 窗口外部大小

窗口外部大小 包括整个浏览器窗口的宽度和高度，包括地址栏、选项卡栏和其他浏览器面板。

要访问外部窗口大小，可以使用 window 对象上直接可用的 outerWidth 和 outerHeight 属性：

const windowOuterWidth = window.outerWidth;
const windowOuterHeight = window.outerHeight;

2.2 窗口内部大小

窗口内部大小 （也称为视口大小）包括显示网页的视口的宽度和高度。

window 对象提供了必要的 innerWidth 和 innerHeight 属性：

const windowInnerWidth = window.innerWidth;
const windowInnerHeight = window.innerHeight;

如果想访问不带滚动条的窗口内部大小，可以使用以下代码：

const windowInnerWidth = document.documentElement.clientWidth;
const windowInnerHeight = document.documentElement.clientHeight;

3. 网页尺寸

网页尺寸 包括页面内容呈现的宽度和高度。

要访问网页内容的尺寸（包括页面的填充，但不包括边框、外边距或滚动条），可以使用以下代码：

const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

如果 pageHeight 大于窗口内部高度，则会显示垂直滚动条。

4. 总结

希望现在您对如何确定不同类型的尺寸有了更好的理解。

屏幕大小 是整个屏幕（或显示器）的大小，而可用屏幕大小 是除去操作系统任务栏或工具栏后的屏幕大小。

窗口外部大小 衡量整个浏览器窗口（包括地址栏、选项卡栏、打开的侧面板），而窗口内部大小 是网页呈现的视口的大小。

最后，网页尺寸是网页及其内容的尺寸。