常用:

JS 获取浏览器窗口大小

  1.  
    // 获取窗口宽度
  2.  
    if (window.innerWidth)
  3.  
    winWidth = window.innerWidth;
  4.  
    else if ((document.body) && (document.body.clientWidth))
  5.  
    winWidth = document.body.clientWidth;
  6.  
    // 获取窗口高度
  7.  
    if (window.innerHeight)
  8.  
    winHeight = window.innerHeight;
  9.  
    else if ((document.body) && (document.body.clientHeight))
  10.  
    winHeight = document.body.clientHeight;
  11.  
    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
  12.  
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
  13.  
    {
  14.  
    winHeight = document.documentElement.clientHeight;
  15.  
    winWidth = document.documentElement.clientWidth;
  16.  
    }

详细:

关于获取各种浏览器可见窗口大小:

  1.  
    function getInfo()
  2.  
    {
  3.  
    var s = "";
  4.  
    s = " 网页可见区域宽：" document.body.clientWidth;
  5.  
    s = " 网页可见区域高：" document.body.clientHeight;
  6.  
    s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
  7.  
    s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
  8.  
    s = " 网页正文全文宽：" document.body.scrollWidth;
  9.  
    s = " 网页正文全文高：" document.body.scrollHeight;
  10.  
    s = " 网页被卷去的高(ff)：" document.body.scrollTop;
  11.  
    s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
  12.  
    s = " 网页被卷去的左：" document.body.scrollLeft;
  13.  
    s = " 网页正文部分上：" window.screenTop;
  14.  
    s = " 网页正文部分左：" window.screenLeft;
  15.  
    s = " 屏幕分辨率的高：" window.screen.height;
  16.  
    s = " 屏幕分辨率的宽：" window.screen.width;
  17.  
    s = " 屏幕可用工作区高度：" window.screen.availHeight;
  18.  
    s = " 屏幕可用工作区宽度：" window.screen.availWidth;
  19.  
     
  20.  
    s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
  21.  
    s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
  22.  
    //alert (s);
  23.  
    }
  24.  
    getInfo();

在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
即可获得，很简单，很方便。 
而在公司项目当中： 
Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
原来是W3C的标准在作怪啊 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
如果在页面中添加这行标记的话 在IE中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
在FireFox中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
? 
在Opera中： 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
而如果没有定义W3C的标准，则 
IE为： 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
Opera为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

js 浏览器 宽高 各种的更多相关文章

  1. js自定义获取浏览器宽高

    /** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...

  2. JQ关于浏览器宽高的获取方式

    JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度 ...

  3. 获取iframe子页面节点，响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  4. Python设置浏览器宽高

    # 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...

  5. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  6. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  7. JS 各种宽高

    1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...

  8. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  9. js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.bo ...

随机推荐

  1. [js]js设计模式-工厂模式

    // 定义一个人 var p1 = { name: 'wxb', age: 22, writejs: function () { console.log(this.name + ' can sing. ...

  2. git中设置http代理和取消http代理

    设置http代理 git config --global https.proxy https://127.0.0.1:1080 取消http代理git config --global --unset ...

  3. OfficeOpenXml：World、Excel导出导入库

    基础库:EPPlus 根据模版:OfficeOpenXml.Entends

  4. windows程序设计 MessageBox消息框

    MessageBox函数 int WINAPI MessageBoxW( HWND hWnd,//窗口句柄 LPCWSTR lpText,//消息框主体显示的字符串 LPCWSTR lpCaption ...

  5. COM中参数标识

  6. 【Checkio Exercise】Robot Sort

    Robot Sort All of the refined ingots should be sorted by size in each lot while passing by on a conv ...

  7. 既然选择了远方，便只顾风雨兼程--myvue

    浅谈以下vue的模式,其实vue的模式跟react是一样的,都是MVVM模式,就是直接数据和视图之间的切换 如果单纯这样认识的话,和angular相比较起来,vue就简单的很多,但是事实情况并不是这样 ...

  8. 【Spark-core学习之七】 Spark广播变量、累加器

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  9. JavaScript 原型链学习（一）原型对象

    在JavaScript中创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有的实例共享的属性和方法.如果按照字面意思来理解 ...

  10. 问题 1462: [蓝桥杯][基础练习VIP]Huffuman树

    题目描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0,  p1,  …,  pn-1},用这列数构造Huffman树的过程如下: ...