如何在JavaScript中获取屏幕、窗口和网页的尺寸

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

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

这些尺寸是如何定义的，重要的是，如何访问它们，这就是我在这篇文章中要讨论的内容。

1.屏幕

屏幕尺寸是指屏幕的宽度和高度：显示器或移动屏幕。

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

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

可用的屏幕尺寸包括没有操作系统工具栏的活动屏幕的宽度和高度。

要访问可用的屏幕尺寸，你可以再次使用window.screen 对象。

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

窗口外部尺寸包括整个浏览器窗口的宽度和高度，包括地址栏、标签栏和其他浏览器面板。

要访问窗口的外部尺寸，可以使用outerWidth 和outerHeight ，这些属性可以直接在window 对象上使用。

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

窗口内部尺寸（又称视口尺寸）包括显示网页的视口的宽度和高度。

window 窗口内部尺寸对象提供了必要的属性innerWidth 和 innerHeight

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

如果你想在没有滚动条的情况下访问窗口内部尺寸，你可以使用以下方法:

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

网页大小由渲染的页面内容的宽度和高度组成。

使用下面的方法来访问网页内容的大小（包括页面的padding，但不包括border、margin或scrollbars）。

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

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

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

屏幕尺寸是指你整个屏幕（或显示器）的尺寸，而可用屏幕尺寸是指不包括操作系统任务栏或工具栏的显示器的尺寸。

窗口外部尺寸是指整个浏览器窗口（包括地址栏、标签栏、侧边面板，如果打开的话），而窗口内部尺寸是指网页呈现的视口尺寸。

最后，网页大小是指网页及其内容的大小。