js如何获取屏幕、窗口和网页的大小

js如何获取屏幕、窗口和网页的大小平时对于各种尺寸总是搞不清楚,比如屏幕、窗口、网页的尺寸大小,这些大小是如何定义的,下来将详细介绍它们的不同之处。主要有以下几种尺寸:1. 屏幕

大家好,欢迎来到IT知识分享网。

平时对于各种尺寸总是搞不清楚,比如屏幕、窗口、网页的尺寸大小,这些大小是如何定义的,下来将详细介绍它们的不同之处。

主要有以下几种尺寸:

1. 屏幕

1.1 屏幕尺寸

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

js如何获取屏幕、窗口和网页的大小

window.screen 是保存屏幕大小信息的对象。以下是获取屏幕宽度和高度的方法:

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

1.2 可用的屏幕尺寸

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

js如何获取屏幕、窗口和网页的大小

要获取可用的屏幕大小,使用window.screen对象中下面这个属性:

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

2. 窗口

2.1 窗口外部尺寸

窗口外部大小由整个浏览器窗口的宽度和高度组成,包括地址栏、标签栏和其他浏览器面板。

js如何获取屏幕、窗口和网页的大小

要获取整个浏览器窗口的大小,可以直接使用window对象上提供的outerWidth和outerHeight属性:

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

2.2 窗口内部尺寸

窗口内部尺寸(也称为可视窗口尺寸)由显示网页的视窗的宽度和高度组成,不包括地址栏、标签栏和其他浏览器面板。

js如何获取屏幕、窗口和网页的大小

window对象提供了 innerWidth innerHeight 属性

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

如果您想在没有滚动条的情况下访问窗口内部大小,可以使用以下代码:

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

3. 网页大小

网页大小指由页面内容的实际宽度和高度组成。

js如何获取屏幕、窗口和网页的大小

使用以下代码 网页内容的大小(包括页面的填充,但不包括边框、边距或滚动条):

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

如果 网页高度(pageHeight 大于窗口内部高度(innerHeight),则显示垂直滚动条。

总结

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

  • 屏幕大小是整个屏幕(或显视器)的大小,而可用屏幕大小是不包括操作系统任务栏或工具栏的显视器大小。
  • 窗口外部大小是整个浏览器窗口(包括地址栏、标签栏、侧面板(如果打开)),而窗口内部大小是网页显示的视口大小。
  • 最后,网页大小是指网页及其内容的大小。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/54952.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信