摘抄：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. swoole之任务和定时器

    一.代码 <?php use Swoole\Server; /** * 面向对象的形式 + task + timer */ class WebSocket { public $server; p ...

  2. 学习Linux系统永远都不晚

    作为一名机械专业毕业的学生,两年的工作经历实实在在地教会了我如何认清现实,让当初那个对机械行业无比憧憬的少年明白了自己选择的路有多艰难.由于我的父母都是工人,所以我比其他同龄人能更早地接触到工业的魅力 ...

  3. py交易

    下载之后发现是pyc文件,反编译一下 网站:https://tool.lu/pyc/ 发现其实就是base64转换为16进制,然后减去16再和32异或,就可以得到答案了 nctf{d3c0mpil1n ...

  4. dwr超时

    DWR可以指定超时设置: 1.设置局部超时: RemoteBean.remoteMethod(param1, param2, ..., { callback: callbackfun, //回调函数 ...

  5. imput placeholder 移动端不居中问题

    input{ height: 100%; } input::-webkit-input-placeholder { display: flex; align-items: center; line-h ...

  6. angularJS MVC及$scope作用域

  7. 十八、React react-router4.x中：实现路由模块化、以及嵌套路由父子组件传值

    一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start ...

  8. python 安装opendr 报错OSMesa

    ### 报错/ERROR: ```opendr/contexts/OSMesa/include/GL/glext.h:5794:21: note: expected ‘const GLchar ** ...

  9. 微服务框架中springboot启动的一个问题

    微服务中,采用的是springboot构建单个项目,其中一个项目user启动过程中总是启动补起来,相关的地方都没有错,始终启动不起来,而且要命的是控制台不打印日志,日志级别是debug级别的,但是打印 ...

  10. 113-PHP使用instanceof判断变量是否为某个类对象

    <?php class ren{ //定义人类 } class mao{ //定义猫类 } $ren=new ren(); //实例化一个人类的对象 $mao=new mao(); //实例化一 ...