# JavaScript 获取客户端屏幕信息

**URL:** <https://www.isharkfly.com/t/javascript/8564>\
**Category:** 前端\
**Created:** [October 24, 2012, 12:36am UTC](https://www.isharkfly.com/t/javascript/8564 "2012-10-24T00:36:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![honeymoose](https://www.isharkfly.com/user_avatar/www.isharkfly.com/honeymoose/32/20796_2.png) [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Post date:** [October 24, 2012, 12:36am UTC](https://www.isharkfly.com/t/javascript/8564/1 "2012-10-24T00:36:50Z")

</div>

在Web 应用程序中，为某种特殊目的如固定文档窗口相对于屏幕尺寸的比例、根据显示器的颜色位数选择需要加载的目标图片等都需要首先获得屏幕的相关信息。

Screen 对象提供了height 和width 属性用于获取客户屏幕的高度和宽度信息，如分辨率为1024\*768 的显示器，调用这两个属性后分别返回1024 和768。

但并不是所有的屏幕区域都可以用来显示文档窗口，如任务栏等都占有一定的区域。

为此，Screen 对象提供了availHeight 和availWidth 属性来返回客户端屏幕的可用显示区域。

一般来说，Windows 操作系统的任务栏默认在屏幕的底部，也可以被拖动到屏幕的两侧或者顶部。

假定屏幕的分辨率为1024_768，当任务栏在屏幕的底部或者顶部时，其占据的屏幕区域大小为1024_30（像素）；当任务栏被拖动到屏幕两侧时，其占据的屏幕区域大小为60\*768。

考察如下针对不同浏览器平台获取客户端屏幕相关信息的代码：[code]

Sample Page! 
* * *
 [/code]可以发现，不管任务栏在何种位置，其 availHeight 和availWidth 属性都返回默认状态栏在底部时可用的区域高度和宽度。

获取客户端屏幕的相关信息后，就可以通过JavaScript 脚本来进行感兴趣的操作，如窗口的尺寸、位置及文档中图片的大小等。

典型应用如全屏页面、保持图片与文档页面大小比例等。