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

*以前用到媒体查询，以当前窗口大小为判断条件的时候，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>