from: http://www.xiaoboy.com/detail/1341545044.html

所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度)。刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度,顺便将该文章摘下来,如下:

在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:

1
2
document.body.offsetWidth
document.body.offsetHeight

在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:

1
2
document.documentElement.clientWidth
document.documentElement.clientHeight

IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;

同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取:

1
2
window.innerWidth
window.innerHeight

摘自《记录前端那些事儿》

【转】JS获取浏览器可视区域的尺寸的更多相关文章

  1. JS获取浏览器可视区域的尺寸

    所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnbl ...

  2. JS获取浏览器可视区域尺寸

    本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...

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

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

  4. 记录一下获取浏览器可视区域的大小的js

    function GetPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) ...

  5. js 获取浏览器可视窗口大小,滚动条高度

    // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && ( ...

  6. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...

  7. 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

    一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

  8. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

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

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

随机推荐

  1. HDU.6155.Subsequence Count(线段树 矩阵)

    题目链接 首先考虑询问[1,n]怎么做 设 f[i][0/1]表示[1,i]以0/1结尾的不同子序列个数 则 \(if(A[i]) f[i][1] = f[i-1][0] + f[i-1][1] + ...

  2. AFN和GCD并行同步问题

    链接: GCD 中组队列group与Afnetworking的结合使用 使用AFNetworking3.0实现接口异步并发 从并发编程到GCD浅述之一----任务.队列.线程复用.AFN3.0同步请求 ...

  3. uva 10816 Travel in Desert(简单的好题~两种方法)

    题意: 给出 一个图 点与点之间的路径上有两个权值 路径长度和温度 要求在所走路径中的温度的最大值最小的前提下 走最短路径 解题思路1: 首先用 最小生成树 的方法走出 最小瓶颈路 .把在这期间用到的 ...

  4. Adding Digital control to Dual tracking LM317 / LM337 Bench supply

    Adding Digital control to Dual tracking LM317 / LM337 Bench supply I've been working on my own idea ...

  5. 修正 Mui 下拉上拉刷新功能

    下拉增加动态时间计算功能: 上拉增加状态文字提示功能(当然也支持时间计算功能,只是我们暂时用不到):

  6. Date与Quartz的cron之间的相互转换

    1.概述 最近在写一个Quartz相关的模块,需要实现Date与Quartz的cron之间的相互转换,在网上查了一下竟然没有找到,但是找到一份这样的博客:http://hw1287789687.ite ...

  7. cocos2d-x项目创建和打包

    1.创建C++的cocos2d-x项目:cocos new test_cpp02 -p com.benmutou.helloWorld -l cpp -d projects C++未编译目录: C++ ...

  8. CentOS下安装配置NFS并通过Java进行文件上传下载

    1:安装NFS (1)安装 yum install nfs-utils rpcbind (2)启动rpcbind服务 systemctl restart rpcbind.service 查看服务状态 ...

  9. React 中 keys 的作用是什么?

    Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () { return ( <ul> {this.state.todoItems.map ...

  10. CoffeeScript简介 <一>

    介绍 coffeeScript是一种轻量级的编程语言,可以用编译器生成原生javascript代码.它简化了许多javascript繁琐的方式,可以让你用简单的方式直接使用一行程序代表javascri ...