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. 专业方向系列-00-Python与有限元初探

    案例1 给出4个弹簧的劲度系数,离散后,求其总的刚度矩阵. 代码: import numpy as np k1, k2, k3, k4 = 500, 250, 2000, 1000 ki = np.a ...

  2. [USACO4.2]Drainage Ditches

    OJ题号:洛谷2740.POJ1273.HDU1532 思路:最大流模板. #include<queue> #include<cstdio> #include<cctyp ...

  3. redis 在 php 中的应用(Connection [ 连接] 篇)

    本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: Connection(连接) AUTH ECHO PING ...

  4. Revit API创建标注NewTag

    start ;             )                 {                     eId = item;                 }            ...

  5. 使用Python登录Github网站

    在下面的代码中, 展示了使用Python脚本登录Github的方法. 如果需要登录别的网站,那么请使用Chrome的Inspect的功能寻找到目标的object,对代码进行替换. 代码先登录了gith ...

  6. CentOS7下FTP的安装与配置

    1.安装vsftpd 1 [root@localhost modules]# yum install -y vsftpd 2.编辑ftp配置文件 1 [root@localhost modules]# ...

  7. Android四大组件应用系列5——使用AIDL实现跨进程调用Service

    一.问题描述 Android应用程序的四大组件中Activity.BroadcastReceiver.ContentProvider.Service都可以进行跨进程.在上一篇我们通过ContentPr ...

  8. MySQL垂直拆分和水平拆分的优缺点和共同点总结

    数据的拆分(Sharding)根据其拆分分规则的类型,可以分为两种拆分模式.一种是按照不同的表(或者Schema)来切分到不同的数据库(主机)之上,这种切可以称之为数据的垂直(纵向)拆分:另外一种则是 ...

  9. (转)Fur Shader

    转自:http://qiankanglai.me/misc/2014/11/15/fur-shader/ 花时间看了下毛发效果,苦于囊中羞涩没能买QuickFur.furFX等插件,最后找到了Fur ...

  10. WIN10平板 如何设置不允许切换竖屏

    点击右下角的通知,然后点击旋转锁定,即可禁止自动竖屏切换