摘抄：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. linux(centos6.9)下使用yum安装mysql，及启动MySQL等

    查看系统自带的mysql版本:rpm -qa | grep mysql 卸载mysql:rpm -e mysql-libs-5.1.73-8.el6_8.x86_64 --nodeps 1. 安装my ...

  2. 从零开始学C++（2 字符串、向量和数组）

    可以说string和vector是C++标准库中最重要的两种类型,string支持可变长字符串,而vector表示可变长的集合. string 头文件:<string> 定义在命名空间 s ...

  3. 053、Java中使用for循环实现1～100的累加

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. Most simple basic of internet programming based on two different machines sharing the same local net

    This blog is just shown for the most simple basic of internet programming based on two different mac ...

  5. LeetCode160 相交链表（双指针）

    题目: click here!!题目传送门 思路: 1.笨方法 因为如果两个链表相交的话,从相交的地方往后是同一条链表,所以: 分别遍历两个链表,得出两个链表的长度,两个长度做差得到n,然后将长的链表 ...

  6. REST接口

    全名是Representational State Transfer REST是设计风格而不是标准 建议将JSON格式作为标准响应格式 -------------------------------- ...

  7. cf 543 D. Road Improvement

    (懒得想了,,又是DP) #include<bits/stdc++.h> #define N 200005 #define LL long long #define inf 0x3f3f3 ...

  8. 二十五、JavaScript之查找字符串中的字符串indexOf和lastIndexOf的用法

    一.代码如下 二.效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" conten ...

  9. POJ 2104 求序列里第K大 主席树裸题

    给定一个n的序列,有m个询问 每次询问求l-r 里面第k大的数字是什么 只有询问,没有修改 可以用归并树和划分树(我都没学过..囧) 我是专门冲着弄主席树来的 对主席树的建树方式有点了解了,不过这题为 ...

  10. 逆向-PE重定位表

    重定位表 ​ 当链接器生成一个PE文件时,会假设这个文件在执行时被装载到默认的基地址处(基地址+RVA就是VA).并把code和data的相关地址写入PE文件.如果像EXE一样首先加载就是它image ...