【JavaScript扩展】JavaScript中的各个宽度尺寸解析

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

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

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

屏幕

window.screen 是保存屏幕尺寸信息的对象。

获取屏幕宽度和高度的语法：

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

可用屏幕的大小

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

window.screen 是保存屏幕尺寸信息的对象，使用他可以获取可用屏幕尺寸的大小。

const screenWitdh = window.screen.availWidth;
const screenHeight = window.screen.availHeight;

窗口

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

要访问窗口外部大小，可以使用 window 对象！

const Witdh = window.outerWidth;
const Height = window.outerHeight;

窗口内部大小

窗口内部大小包括显示网页的视口的宽度和高度

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

const Witdh = window.innerWidth;
const Height = window.innerHeight;

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

const Witdh = document.documentElement.clientWidth;
const Height = document.documentElement.clientHeight;

网页尺寸（内容可视区域）

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

const Witdh = document.documentElement.scrollWidth;
const Height = document.documentElement.scrollHeight;

注意： pageHeight 大于窗口内部高度，则会显示垂直滚动条