网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

－－－－－－－－－－－－－－－－－－－

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码 <!——————————文件名：30.3.htm——————————>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!–显示浏览器窗口的实际尺寸–>
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!–
var winWidth = 0;
   var winHeight = 0;
   function findDimensions() //函数：获取尺寸
   {
   //获取窗口宽度
   if (window.innerWidth)
   winWidth = window.innerWidth;
   else if ((document.body) && (document.body.clientWidth))
   winWidth = document.body.clientWidth;
   //获取窗口高度
   if (window.innerHeight)
   winHeight = window.innerHeight;
   else if ((document.body) && (document.body.clientHeight))
   winHeight = document.body.clientHeight;
   //通过深入Document内部对body进行检测，获取窗口大小
   if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
   {
   winHeight = document.documentElement.clientHeight;
   winWidth = document.documentElement.clientWidth;
   }
   //结果输出至两个文本框
   document.form1.availHeight.value= winHeight;
   document.form1.availWidth.value= winWidth;
   }
   findDimensions();
   //调用函数，获取数值
   window.onresize=findDimensions;
//–>
</script>
</body>
</html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

JS 获取浏览器和屏幕宽高信息的更多相关文章

  1. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  2. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  3. js获取精确的元素宽高（普通获取高度会有误差）

    当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...

  4. javascript 常用获取页面宽高信息 API

    在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...

  5. JS获取浏览器信息及屏幕分辨率

    因为vue有自己的生命周期,初始化数据的时候,可以在钩子函数created()函数里初始化数据,也可以在mounted()函数里获取,但是两者是不同的,获取浏览器和屏幕分辨率的时候,不能在create ...

  6. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  7. js获取浏览器类型和版本信息

    bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...

  8. js获取浏览器信息及版本（兼容IE）

    获取浏览器信息方法有很多种,但是要是兼容ie旧版本就有点麻烦了,因为很多方法在旧版本ie是不支持的,所以ie我做了单独处理,但是目前还有小问题,就是想显示QQ浏览器,搜狗浏览器..这样的,这样还实现不 ...

  9. js get browser vertion (js获取浏览器信息版本)

    1问题:js get browser vertion (js获取浏览器信息版本) 2解决方案 Copy this script into your JavaScript files. It works ...

随机推荐

  1. angularjs 遇到的问题汇总

    angular2 学习资源集锦:https://github.com/timjacobi/angular2-education 在学习angular开发项目过程遇到的问题:

  2. python模块之subprocess

    可以执行shell命令的相关模块和函数有: os.system os.spawn* os.popen*          --废弃 popen2.*           --废弃 commands.* ...

  3. 揭秘 typedef四用途与两陷阱[转]

    自 http://niehan.blog.techweb.com.cn/archives/325.html typedef用来声明一个别名,typedef后面的语法,是一个声明.本来笔者以为这里不会产 ...

  4. virtualbox共享文件夹

    来自官方文档的答案是最好的,其他的网上解决方案都有些问题. In a Linux guest, use the following command: mount -t vboxsf [-o OPTIO ...

  5. GPON和820.1p学习及资料（zt)

    1)hw的两个PPT不错,GPON技术基础.ppt和10G-GPON技术基础.ppt, 介绍了GPON的知识背景,标准的名称,帧协议. 尤其是详细对比了10G-PON和G-PON的区别,以及演进的道路 ...

  6. AIX 环境下动态路由

    IBM AIX v5.3操作系统环境下动态路由配置如下: 1,用命令lssrc -S routed和lssrc -S gated分别检查routed和gated子系统是是活动状态.如果这两个子系统为活 ...

  7. This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms while caching 问题及解决

    一.背景    情节1:做别的测试安装下载了软件,妈蛋结果下了百度各种捆绑软件,之后一一卸载,清洁.    情节2:做完上述动作重启电脑后,有线连接连不上,尴尬,然后下载驱动,升级之后ok了. 二.问 ...

  8. python 字符编码 转换

    #!/bin/env python#-*- encoding=utf8 -*-# 文件头指定utf8编码还是乱码时,使用下面方式指定# fix encoding problem import sys ...

  9. 搭载在webstorm上的go语言开发插件安装

    1. 2.搜索框内搜索go,单击“Browse repositories... ”没有匹配结果(因本人已安装好插件,所以go已经显示在上面了) 3.单击"Manage repositorie ...

  10. quartz 框架定时任务，使用spring @Scheduled注解执行定时任务

    配置quartz 在spring中需要三个jar包: quartz-1.6.5.jar.commons-collections-3.2.jar.commons-logging-1.1.jar 首先要配 ...