screen.availHeight 和 window.height() 之间的区别

发布于 2024-09-05 12:46:20 字数 417 浏览 1 评论 0原文

我正在我的浏览器(Firefox)上执行以下 Javascript。

  1. console.debug("屏幕高度 = "+ screen.availHeight); //输出 770

  2. console.debug("窗口高度 ="+ $(window).height()); //输出 210 (我也使用 jQuery)

两者之间有什么区别? 770的单位是像素,210的单位是毫米吗?

同样,当我编写 $(document).height()$(window).height() 时,也有区别。原因是什么?

I am executing the following Javascript on my browser (Firefox).

  1. console.debug("Screen height = "+ screen.availHeight); //outputs 770

  2. console.debug("Window Height ="+ $(window).height()); //outputs 210 (I am using jQuery as well)

What is the difference between the two? Is 770 in pixels and 210 in mm?

Similarly, when I write $(document).height() and $(window).height(), there is a difference. What is the reason?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

云雾 2024-09-12 12:46:20

window.outerHeight

它是屏幕上窗口的高度,它包括页面和所有可见的浏览器栏(位置、状态、书签、窗口标题、边框等)。

与 jQuery 的 $(window).outerHeight() 相同。

window.innerHeight$(window).height()

它是显示网站的视口高度,仅显示内容,不显示浏览器栏。

document.body.clientHeight$(document).height()

这是视口中显示的文档的高度。如果它高于 $(window).height() 您将获得滚动条来滚动文档。

screen.availHeight

这是浏览器窗口最大化时可以具有的高度,包括浏览器的栏。因此,当窗口最大化时, screen.availHeight === window.outerHeight

screen.height

它只是匹配屏幕的分辨率。因此,在 1920×1080 屏幕上,screen.height 将为 1080

screen.availHeight 等于 [screen.height + 操作系统的栏],例如 Windows 上的任务栏、OS X 上的停靠栏和菜单,或者任何固定的内容如果您使用的是 Linux,则位于屏幕的顶部或底部。

window.outerHeight

It's the height of the window on screen, it includes the page and all the visible browser's bars (location, status, bookmarks, window title, borders, …).

This not the same as jQuery's $(window).outerHeight().

window.innerHeight or $(window).height()

It's the height of the viewport that shows the website, just the content, no browser's bars.

document.body.clientHeight or $(document).height()

It's the height of your document shown in the viewport. If it is higher than $(window).height() you get the scrollbars to scroll the document.

screen.availHeight

It's the height the browser's window can have if it is maximized, including the browser's bars. So when the window is maximized, screen.availHeight === window.outerHeight

screen.height

It simply matches the screen's resolution. So on a 1920×1080 screen, screen.height will be 1080.

screen.availHeight is equal to [screen.height + the operating system's bars], like the taskbar on Windows, the dock and menu on OS X, or whatever is fixed on top or bottom of your screen if you're using Linux.

温馨耳语 2024-09-12 12:46:20

想要更正 @jigfox 的回答中所述的问题:

https://www.w3schools.com/jsref/prop_screen_availheight.asp#:~:text=The%20availHeight%20property%20returns%20the, )%2C%20use%20%20availWidth%20属性。

availHeight 属性返回用户屏幕的高度(以像素为单位),减去 Windows 任务栏等界面功能。

提示:要获取屏幕的高度(不包括 Windows 任务栏),请使用vailHeight 属性。

Wanted to correct a thing stated in @jigfox 's answer:

https://www.w3schools.com/jsref/prop_screen_availheight.asp#:~:text=The%20availHeight%20property%20returns%20the,)%2C%20use%20the%20availWidth%20property.

The availHeight property returns the height of the user's screen, in pixels, minus interface features like the Windows Taskbar.

Tip: To get the height of the screen (excluding the Windows Taskbar), use the availHeight property.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文