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. Jekyll搭建github个人博客

    一.安装ruby环境 Windows下载地址: http://rubyinstaller.org/ Ruby官网: http://www.ruby-lang.org/zh_cn/ 下载安装即可 环境配 ...

  2. COGS.1689.[HNOI2010]Bounce 弹飞绵羊(分块)

    题目链接 /* 分块,维护从某位置跳到下一个块需要多少步 */ #include<cmath> #include<cstdio> #include<cctype> ...

  3. nginx 方向代理 jenkins

    环境 10.0.0.20 Nginx 10.0.0.21 jenkins 10.0.0.20 nginx 进入到nginx目录,去除无用字段输入到conf.d/jenkins.conf 文件中 [ro ...

  4. WCF、WebAPI、WCFREST和Web服务的差异 ASP.NETMVC和ASP.NETWebAPI的差异

    WCF.WebAPI.WCFREST和Web服务的差异: Web服务 它是基于SOAP和XML的形式返回数据. 它仅支持HTTP协议. 它是开放源,但是不消耗任何客户端可以同时理解XML. 它可以仅在 ...

  5. MySQL中间件方案盘点_搜狐科技_搜狐网

    MySQL中间件方案盘点_搜狐科技_搜狐网

  6. JTAG 引脚自动识别 JTAG Finder, JTAG Pinout Tool, JTAG Pin Finder, JTAG pinout detector, JTAGULATOR, Easy-JTAG, JTAG Enumeration

    JTAG Finder Figuring out the JTAG Pinouts on a Device is usually the most time-consuming and frustra ...

  7. Mac下的命令行自动补全功能

    /usr/local/etc/bash_completion.d

  8. Face Recognition for the Happy House

    Andrew Ng deeplearning courese-4:Convolutional Neural Network Convolutional Neural Networks: Step by ...

  9. Shiro基础知识03----shiro授权(编程式授权),Permission详解,授权流程(zz)

    授权,也叫访问控制,即在应用中控制谁能访问哪些资源(如访问页面/编辑数据/页面操作等).  在权限认证中,最核心的是:主体/用户(Subject).权限(Permission).角色(Role).资源 ...

  10. eclipse:报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    JavaWeb: 报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bui ...