平时对于各种尺寸总是搞不清楚，比如屏幕、窗口、网页的尺寸大小，这些大小是如何定义的，下来将详细介绍它们的不同之处。主要有以下几种尺寸：1.屏幕1.1屏幕尺寸屏幕尺寸是屏幕的宽度和高度:显示器或移动屏幕。
平时对于各种尺寸总是搞不清楚，比如屏幕、窗口、网页的尺寸大小，这些大小是如何定义的，下来将详细介绍它们的不同之处。
主要有以下几种尺寸：
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.clientHeigh;3. 网页大小
网页大小指由页面内容的实际宽度和高度组成。
使用以下代码 网页内容的大小（包括页面的填充，但不包括边框、边距或滚动条）：
const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;如果 网页高度（pageHeight） 大于窗口内部高度（innerHeight），则显示垂直滚动条。
总结
现在您对如何确定不同类型的尺寸是否有了更好的了解。
- 屏幕大小是整个屏幕（或显视器）的大小，而可用屏幕大小是不包括操作系统任务栏或工具栏的显视器大小。
- 窗口外部大小是整个浏览器窗口（包括地址栏、标签栏、侧面板（如果打开）），而窗口内部大小是网页显示的视口大小。
- 最后，网页大小是指网页及其内容的大小。
创业项目群，学习操作 18个小项目，添加 微信：niuben22 备注：小项目！
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 1553299181@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.zhuanmi.vip/60734.html
如若转载，请注明出处：https://www.zhuanmi.vip/60734.html