window窗口尺寸和window.screen屏幕尺寸的正确理解

窗口与屏幕尺寸解析

最新推荐文章于 2024-08-06 09:59:58 发布

原创最新推荐文章于 2024-08-06 09:59:58 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

前端综合专栏收录该内容

5 篇文章

订阅专栏

本文详细解释了浏览器窗口尺寸和屏幕尺寸的区别，并提供了获取这两种尺寸的具体方法。文章针对不同浏览器版本给出了兼容性的解决方案。

*以前用到媒体查询，以当前窗口大小为判断条件的时候，window窗口大小和屏幕大小的用法和写法，傻傻分不清楚，今天来梳理一下。

一、首先来说说window窗口大小：

浏览器的窗口尺寸的理解：浏览器的视口（不包括工具栏和滚动条）。

如下图：

*1.窗口宽度就是整个浏览器左边到右边（包括上下滚动条的宽度）的宽度。注意，上图没有水平的左右滚动条，但是窗口宽度是不包

括水平滚动条中未出现的界面，只取浏览器最大化后的可见视口（即上图左右红色箭头标注处）。

*2.窗口高度为上图黄色区域（工具栏）下边到红色区域（任务栏）上边的距离（包括水平左右滚动条的高度），不包括上下滚动条中

未出现的界面，只取最大化浏览器后的可见界面。

获取尺寸的方法有几种：

1.对于IE、Chrome、FF、Safari等：

宽度：window.innerWidth.

高度：window.innerHeight.

2.对于IE8、7、6、5：

宽度：document.documentElement.clientWidth 或者document.body.clientWidth

高度：document.documentElement.clientHeight 或者 document.body.clientHeight

二、Window Screen 屏幕尺寸

1.screen宽度也就是我们的屏幕分辨率的宽度。

2.screen高度是除去我们底部任务栏外的屏幕高度。

获取尺寸的方法：

*window.screen对象在编写时可以不使用 window 这个前缀。

1.screen.availWidth - 可用的屏幕宽度

2.screen.availHeight - 可用的屏幕高度

实例如：

<span style="white-space:pre">	</span><script>
<span style="white-space:pre">		</span>document.write("Available Width: " + screen.availWidth);
<span style="white-space:pre">	</span></script>