摘抄：https://blog.csdn.net/qq_27628085/article/details/81947478

常用:

JS 获取浏览器窗口大小

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

详细:

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

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

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  2. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  3. JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. 函数语法：JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度（转载）

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  5. JS 获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  6. 常用: JS 获取浏览器窗口大小

    // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && ...

  7. JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  9. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

随机推荐

  1. P1059 C语言竞赛

    P1059 C语言竞赛 转跳点:

  2. main方法

    main函数的分析(python) 对于很多编程语言来说,程序都必须要有一个入口,比如C,C++,以及完全面向对象的编程语言Java,C#等.如果你接触过这些语言,对于程序入口这个概念应该很好理解,C ...

  3. jmeter里面Dug Sampler 和json提取器的用法

    1.编写用户详情请求 2.查看结果树 一级一级往上查找父集 3.添加json提取器 步骤:点击[用户详情]请求->添加->后置处理器->json提取器 把查看结果树里面的JSON P ...

  4. sql 经纬度范围检索(谷歌方案)

    SELECT id, ( * acos ( //公里: 6371 英里: 3959 cos ( radians(78.3232) ) * cos( radians( 数据库纬度字段) ) * cos( ...

  5. ThinkCMF框架上的任意内容包含漏洞

    一.背景 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建. ThinkCMF提出灵活的应用机制,框架自身提供基础的管理功能,而开发者可以根据 ...

  6. Azure Cognitive Services- Speech To Text

    Speech 服务是认知服务的一种,提供了语音转文本,文本转语音, 语音翻译等,今天我们实战的是语音转文本(Speech To Text). STT支持两种访问方式,1.是SDK,2.是REST AP ...

  7. 014.Oracle数据库，取本周第一天(星期一), 取本周最后一天(星期天)

    /*取本周第一天(星期一),取本周最后一天(星期天)*/ SELECT trunc( SYSDATE, AS 星期一 , trunc( SYSDATE, AS 星期天 FROM dual; 效果如下: ...

  8. Kubernetes v1.17.3 CentOS8 基于kuberadm安装

    1.机器配置: IP 主机名 节点类型 配置 192.168.31.32 node32 master 4核16G 192.168.31.33 node33 worker 4核16G 192.168.3 ...

  9. [题解] LuoguP3768 简单的数学题

    Description 传送门 给一个整数\(n\),让你求 \[ \sum\limits_{i=1}^n \sum\limits_{j=1}^n ij\gcd(i,j) \] 对一个大质数\(p\) ...

  10. 三十二、SAP中定义选择屏幕

    一.SAP中PARAMETERS表示选择屏幕,使用方法如下 二.运行代码 三.PA_CAR为我们选择的0017 四.点击执行之后,由于我们未在代码中触发相关的过滤功能,显示的表格为全部表格,效果如下