常用:

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. 3.1.1 Spring 简介

    1. 概念 Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架. IoC : Inversion of Control AOP : Aspect Oriented Program ...

  2. [LeetCode] 62. Unique Paths_ Medium tag: Dynamic Programming

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  3. #WEB安全基础 : HTTP协议 | 0x3 TCP三次握手和DNS服务

    TCP三次握手精准无误地把数据送达目标处,TCP协议把数据包送出去后,向对方确认是否成功发送,握手过程中使用了TCP的标志(flag)——SYN和ACK 请看图 若握手中断,TCP协议再次从同样顺序发 ...

  4. 邮件发送 utils

    package cn.itcast.bos.utils;   import java.util.Properties;   import javax.mail.Message; import java ...

  5. sparse-table模板

    预处理: void init(int n) { ;i < n;i++) { dp[i][] = a[i]; } int bitn = (int)(log(n)/log(2.0)); ;j < ...

  6. Intellij IDEA junit 使用之org.junit不存在

    在IDEA里面已经新建好了一个类,并加入了内容,然后创建测试类,快捷键(Ctrl+Alt+T)或者如图右键 Goto Test 创建后运行报错: Error:(3, 24) java: 程序包org. ...

  7. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  8. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  9. Python socket ssh接收大数据

    通过socket连续接收返回数据 Server服务端 import socket,os server = socket.socket() server.bind(('localhost',9999)) ...

  10. final修饰符与多态

    知识点一.final 最终的可以修饰属性.方法.类1.final修饰的属性,表示常量,初始化以后值不能改变.final修饰引用数据类型的变量,引用地址不能改变.2.final修饰类,不能被继承.比如: ...