切换模式
如何在JavaScript中获取屏幕，窗口和网页大小?
前端小姐姐
web前端开发相关资料有需要的加我主页裙！
要检测浏览器窗口是横向还是纵向，可以比较浏览器窗口的宽度和高度。
但是从我的经验来看，很容易混淆一堆尺寸：屏幕，窗口，网页尺寸。
我将在本文中讨论如何定义这些大小，以及重要的是如何访问它们。
1.屏幕
1.1屏幕尺寸
屏幕尺寸是屏幕的宽度和高度：监视器或移动屏幕。
window.screen是保存屏幕尺寸信息的对象。以下是访问屏幕宽度和高度的方法：
1.2可用屏幕尺寸
可用的屏幕大小由活动屏幕的宽度和高度组成，而没有操作系统工具栏。
要访问可用的屏幕尺寸，可以再次使用window.screen对象：
2.窗户
2.1窗外尺寸
窗口的外部大小由整个浏览器窗口的宽度和高度组成，包括地址栏，选项卡栏和其他浏览器面板。
要访问外部窗口的大小，可以使用属性outerWidth，outerHeight这些属性可以直接在window对象上使用：
2.2窗户内部尺寸
窗口的内部大小（也称为视口大小）由显示网页的视口的宽度和高度组成。
window对象提供必要的属性innerWidth和innerHeight：
如果您想在不使用滚动条的情况下访问窗口内部尺寸，则可以使用以下内容：
3.网页大小
网页大小由呈现的页面内容的宽度和高度组成。
使用以下命令访问网页内容的大小（包括页面的填充，但不包括边框，边距或滚动条）：
如果pageHeight大于窗口内部高度，则显示垂直滚动条。
4.总结
希望您现在对如何确定各种尺寸有了更好的了解。
屏幕大小是整个屏幕（或监视器）的大小，而可用的屏幕大小是监视器的大小，不包括OS任务栏或工具栏。
窗口的外部尺寸测量整个浏览器窗口（包括地址栏，选项卡栏，侧面板（如果已打开）），而窗口的内部尺寸是网页渲染时视口的尺寸。
最后，网页大小是具有其内容的网页的大小。
原著作者： 德米特里·帕夫鲁汀
文章来源：国外
原著链接：
PS：原著文章内容为英文版本，建议使用360极速浏览器进行翻译阅读。
发布于 2020-07-08 14:44
JavaScript
前端开发
前端工程师