HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

目录

1. ：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2. ：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。

3. ：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。

4. ：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽度。

一、介绍

1. 容器

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。

HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

2. 物理尺寸和分辨率

容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。

如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。

3. 展示图

二、屏幕信息

screen.height ：屏幕高度。

screen.width ：屏幕宽度。

screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。

screen.availWidth ：屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度 ：可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight 。

三、浏览器信息

window.outerHeight ：浏览器高度。

window.outerWidth ：浏览器宽度。

window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 ：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

四、页面信息

body.offsetHeight ：body总高度。

body.offsetWidth ：body总宽度。

body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度。

body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 ：如高度，可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。

==================================系列文章==========================================

本篇文章：4.2 HTML 获取屏幕、浏览器、页面的高度宽度

Web开发之路系列文章

1.HTML

1.1HTML页面源代码布局介绍

1.2HTML基础控件介绍

1.3iframe 和 frameset 的区别

1.4name、id、class 的区别

1.5table、form表单标签的介绍以及get和post提交方式

1.6HTML kbd键盘元素

1.7HTML 鼠标坐标和元素坐标

2.CSS 层叠样式表

2.1CSS 选择器及各样式引用方式

2.2CSS HTML元素布局及Display属性

2.3CSS Float 浮动属性

2.4CSS Position 定位属性

3.JavaScript介绍

3.1JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

3.2JavaScript function函数种类

3.3JavaScript Array对象

3.4JavaScript Date对象

3.5JavaScript Math和Number对象

3.6JavaScript String对象

3.7JavaScript Object对象

3.8JavaScript 自定义对象

3.9JavaScript 对象属性介绍

3.10JavaScript 开发规范

4.BOM

4.1HTML BOM Browser对象

4.2HTML 获取屏幕、浏览器、页面的高度宽度

4.3HTML URL地址解析

5.DOM

5.1HTML DOM 介绍

5.2HTML DOM 对象

5.3HTML 事件(一) 事件的介绍

5.4HTML 事件(二) 事件的注册与注销

5.5HTML 事件(三) 事件流与事件委托

5.6HTML 事件(四) 模拟事件操作

6.HTML5

6.1HTML5 介绍

6.2HTML5 语义元素(一)页面结构

6.3HTML5 语义元素(二)文本内容

6.4HTML5 input元素新的特性

6.5HTML5 progress和meter控件

6.6HTML5 sessionStorage会话存储

6.7HTML5 localStorage本地存储

6.8HTML5 元素属性介绍

7.ExtJS 4.2

7.1ExtJS 4.2 介绍

7.2ExtJS 4.2 第一个程序

7.3ExtJS 4.2 组件介绍

7.4ExtJS 4.2 组件的查找方式

7.5ExtJS 4.2 业务开发(一)主页搭建

7.6ExtJS 4.2 业务开发(二)数据展示和查询

7.7ExtJS 4.2 业务开发(三)数据添加和修改

7.8ExtJS 4.2 Grid组件的单元格合并

7.9ExtJS 4.2 Date组件扩展：添加清除按钮

7.10ExtJS 4.2 评分组件

8.CSS 3

8.1CSS3 border-radius边框圆角

8.2CSS3 background-image背景图片相关介绍

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

参考文献：

1）http://www.w3school.com.cn/

2）《JavaScript权威指南(第六版)》