常用:

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. Linux下批量杀掉筛选进程

    在做项目的时候,由于情况要求,需要把服务器上符合某一条件的进程全部kill掉,但是又不能使用killAll直接杀掉某一进程名称包含的所有运行中的进程(即我们可能只需要杀掉某一类含有特定参数命令的进程) ...

  2. Python基础(九) type元类

    python元类:type()    元类是python高阶语法. 合理的使用可以减少大量重复性的代码. 元类实际上做了以下三方面的工作: 干涉创建类的过程 修改类 返回修改之后的类 为什么使用元类? ...

  3. 今天整理了一下Winform用的UI插件信息

    平时主要用了一下几个比较好的UI控件: 1:IrisSkin2 皮肤插件.这是一款与编程开发相关的素材资源,主要是提供一些采用IrisSkin2.dll控件进行软件窗口换肤的素材文件,包括一些GIF图 ...

  4. vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用

    vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用 Stepper 步进器 的默认值有没有弄过的,看了组件只能默认数字的,传字符串进去不起作用<div slot ...

  5. Oarcle 入门之where关键字

    --where 关键字 --作用:过滤行 *将需要的行用where引导出来 用法: 1.判断符号:=,!=,<>,<,>,<=,>=,any,some,all; 例 ...

  6. [转载]get、post异同

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  7. php 从一个数组中随机获取固定数据

    <?php /* * * 通过一个标识,从一个数组中随机获取固定数据 * $arr 数组 * $num 获取的数量 * $time 随机固定标识值,一般用固定时间或者某个固定整型 * */ fu ...

  8. Qt自定义阴影效果和QOpenGLWidget冲突导致控件不刷新

    Qt5.6.2版本存在这样一个问题(其它版本未测试),当main函数中设置了application.setAttribute(Qt::AA_NativeWindows)(用于使得每个子界面都可以获取w ...

  9. 经典排序js实现

    https://www.cnblogs.com/onepixel/articles/7674659.html

  10. robot framework学习五——AutoltLibrary库

    安装中遇到的问题: 安装好了AutoItLibrary,但是导入到RIDE后,仍然红色显示 搜索了下解决办法,说要安装下autoit-v3-setup.exe https://www.autoitsc ...