screen.availHeight 和 window.height() 之间的区别
我正在我的浏览器(Firefox)上执行以下 Javascript。
console.debug("屏幕高度 = "+ screen.availHeight); //输出 770
console.debug("窗口高度 ="+ $(window).height()); //输出 210 (我也使用 jQuery)
两者之间有什么区别? 770的单位是像素,210的单位是毫米吗?
同样,当我编写 $(document).height()
和 $(window).height()
时,也有区别。原因是什么?
I am executing the following Javascript on my browser (Firefox).
console.debug("Screen height = "+ screen.availHeight); //outputs 770
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
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 be1080
.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.想要更正 @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.