Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法

摘要: 由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。

归类: Javascript,

关键词: window, 文档, offsetHeight, clientHeight, innerHeight, 视口, 窗口,

收藏本页到：

由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。

--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------

本文所说的“浏览器窗口中文档（下面简称“视口”）可用尺寸”指浏览器中文档显示区域的尺寸，不包括标题栏、工具栏、滚动条等内容。

在处理这一信息时，不同浏览器和同一浏览器不同版本中有一些差别，说明如下：

（1）在 IE4、IE5 和没有声明 DOCTYPE 的 IE6 中，视口的这一信息保存在“body”元素中，可以用 document.body.offsetWidth / offsetHeight 获取，

（2）在声明了DOCTYPE 的 IE6 中，视口的这一信息保存在 document.documentElement 中，可以用 document.documentElement.clientWidth / clientHeight 获取。

（3）除了 IE 以外的所有浏览器都将此信息保存在 window 对象中，可以用 window.innerWidth / innerHeight 获取。

因此，综合上面的说明，我们可以用下面的方式获取浏览器窗口中文档（视口）可用尺寸：

Javascript:

<script type="text/javascript">
// 说明：Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法
// 整理：http://www.CodeBit.cn
function getViewportInfo()
{
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
return {w:w,h:h};
};
</script>



        注意！这一信息的获取时临时的，当浏览器窗口本身大小被改变时，此信息也将跟随改变！

Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法相关推荐

html中获取浏览器窗口宽度,JavaScript 获取浏览器窗口的大小
简明现代魔法 -> JavaScript -> JavaScript 获取浏览器窗口的大小 JavaScript 获取浏览器窗口的大小 2010-04-16 程序演示: 获取浏览器当前窗口 ...
JavaScript获取浏览器、元素、屏幕的宽高尺寸
版权声明转载请告知并注明来源作者作者:唐金健网络昵称:御焱掘金知乎思否专栏:优雅的前端前言有时候在获取浏览器.元素.屏幕的尺寸,傻傻分不清.为了让自己清晰认识,能够快速确定自己需要哪个属性 ...
html浏览器宽度,JavaScript获取浏览器、元素、屏幕的宽高尺寸
版权声明转载请告知并注明来源作者作者:唐金健网络昵称:御焱掘金知乎思否专栏:优雅的前端前言有时候在获取浏览器.元素.屏幕的尺寸,傻傻分不清.为了让自己清晰认识,能够快速确定自己需要哪个属性 ...
JavaScript获取浏览器可视区域的宽高
JavaScript获取浏览器可视区域的宽高在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可 ...
js获取浏览器窗口页面宽度、高度的方法 kaki 的博客
js获取浏览器窗口页面宽度.高度的方法不多说,直接上代码 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()) ...
jq获取页面高度_通过 jQuery 获取浏览器窗口高度问题
我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题.例如,我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度,就遇到了问题. 理论上,$(window ...
python获取窗口句柄_Python+selenium 获取浏览器窗口坐标、句柄的方法
1.0 获取浏览器窗口坐标 python目录可找到Webdriver.py 文件定义了get_window_rect()函数,可获取窗口的坐标和大小(长宽),但出现"Command not ...
获取浏览器窗口宽高问题总结
s = "网页可见区域宽:"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document ...
js和jQuery获取浏览器窗口的高度、宽度的方法详解
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.inn ...

Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法

关键词: window, 文档, offsetHeight, clientHeight, innerHeight, 视口, 窗口,

Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法相关推荐

最新文章

热门文章