常用:

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. windows----------windows查看端口是否被占用

    假如我们需要确定谁占用了我们的80端口在windows命令行窗口下执行: netstat -aon|findstr "80" TCP 127.0.0.1:80 0.0.0.0:0 ...

  2. OOP面向对象编程(下)

    我们怎么去模拟重载,在javasceipr中我们可以通过参数的类型区别或者数量的区别,来去让同样一个函数名字,可以根据不同的参数列表的情况来去调用相应的函数. javascript中函数类型是不确定的 ...

  3. html5 javascript 新增加的高级选择器更精准更实用

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. zw·10倍速大数据与全内存计算

    zw·10倍速大数据与全内存计算 zw全内存10倍速计算blog,早就在博客园机器视觉栏目发过,大数据版的一直挂着,今天抽空补上. 在<零起点,python大数据与量化交易>目录中 htt ...

  5. Oarcle 入门之like关键字

    like关键字 模糊查询,有两个特殊的符号"%" ,"_" “%”表示匹配零个或若干字符 放哪边就表示哪边有零到若干个未知符号,其作用起到占位符的效果. “_” ...

  6. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  7. Maven Web Project设置Webcontent路径

    1,新建maven-archetype-webapp 2,右键项目-->Properties-->选中Project Facets中的Runtimes标签,然后Java版本改为1.8,Dy ...

  8. ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 题目9 : Minimum

    时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 You are given a list of integers a0, a1, …, a2^k-1. You need t ...

  9. CSS 初知

    CSS 初知 举例 人 { 身高:175cm; 体重:70kg; 肤色:黄色 } 描述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通 ...

  10. jQuery 位置

    jQuery 位置 // 默认窗口 $(window) // 查看.指定标签上下滚轮的位置数 $('#id').scrollTop() // 设置.指定标签上下滚轮的位置数 $('#id').scro ...