通过onresize事件

 1 window.onresize = function () {
 2     document.title = client().width + "    "+ client().height;
 3 }
 4
 5
 6  //获取屏幕可视区域的宽高
 7 function client(){
 8    if(window.innerHeight !== undefined){
 9        return {
10             "width": window.innerWidth,
11             "height": window.innerHeight
12         }
13     }else if(document.compatMode === "CSS1Compat"){
14             return {
15                 "width": document.documentElement.clientWidth,
16                 "height": document.documentElement.clientHeight
17             }
18     }else{
19        return {
20             "width": document.body.clientWidth,
21              "height": document.body.clientHeight
22        }
23     }
24}
25
26 二、获取浏览器宽度和高度-使用懒函数优化
27 window.onresize = function() {
28     document.title = client().width + "    " + client().height;
29}
30
31  //获取屏幕可视区域的宽高
32    !function() {
33        if(window.innerHeight !== undefined) {
34             client = function() {
35                 return {
36                    "width": window.innerWidth,
37                    "height": window.innerHeight
38                 }
39              }
40        } else if(document.compatMode === "CSS1Compat") {
41              client = function() {
42                  return {
43                     "width": document.documentElement.clientWidth,
44                     "height": document.documentElement.clientHeight
45                   }
46               }
47
48        } else {
49              client = function() {
50                  return {
51                      "width": document.body.clientWidth,
52                      "height": document.body.clientHeight
53                   }
54              }
55
56         }
57   }();

转载于:https://www.cnblogs.com/web-wjg/p/7136899.html

js兼容性——获取当前浏览器窗口的宽高相关推荐

  1. JS获取浏览器可视区域宽高

    写在前面 浏览器可视区域宽高并不就等于浏览器窗口宽高,而是除去顶部标签栏+滚动条(如果有)+控制台(如果有f12打开)之外的尺寸大小 因为比较简单所以直接上代码: let w, h; // 对于ie9 ...

  2. js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  3. javascript 快速获取图片实际大小的宽高

    javascript 快速获取图片实际大小的宽高 简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...

  4. JS如何设置获取盒模型对应的宽高

    dom.style.width/height(只适用获取内联元素的宽和高) dom.currentStyle.width/height(获取渲染后的宽高,但是仅IE支持) window.getComp ...

  5. angular js 打开新的浏览器窗口

    1.带参数打开新窗口 const newPath = location.origin + '/list' + '?name=' + name + '&sex=' + sex ; const w ...

  6. JS如何关闭当前浏览器窗口?

    在浏览器中,如何进行当前浏览器窗口的关闭呢? <script>function close() {window.open("about:blank", "_t ...

  7. js 获取上传图片和视频的宽高,还有视频的时长

    场景: 当产品经理告诉你说:我们需要限制上传的图片或视频的尺寸,不符合要求不允许上传,这个时候你该怎么做? 不用多想,很明显我们需要想办法拿到图片或视频的宽度,然后和预期的尺寸进行对比过滤,就能轻易实 ...

  8. 在Vue中获取DOM元素的实际宽高

    最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以 ...

  9. Android获取UI控件的宽高

    一.概述 我们如果开发一些依赖于UI控件宽高的功能,那么自然会想到调用View的getHeigth()和getWidth()方法,对于新手来说,这里有一个坑,你在Activity中的onCreate( ...

最新文章

  1. Exchange与ADFS单点登录 PART 2:部署和配置ADFS
  2. Vuebnb:一个用vue.js和Laravel构建的全栈应用
  3. Android开发之自定义Dialog二次打开报错问题解决
  4. 如何在PowerShell中使用带有空格和引号的参数运行EXE文件
  5. 深入理解Openstack自动化部署
  6. Node.js的交互式解释器(REPL)
  7. ObjC学习11-复制对象与归档
  8. 11月6日云栖精选夜读:阿里云双11访谈之云安全
  9. 北京天通苑二房东、黑中介
  10. 用java编写猜数字游戏
  11. java 双向链表循环_(java实现)双向循环链表
  12. c语言中动态内存分配的作用,C语言中动态内存的分配(malloc,realloc)
  13. https://blog.csdn.net/Darryl_Tang/article/details/80545688
  14. Linux网络操作命令
  15. Android国内5大主流音乐APP分析
  16. ps图层混合模式的含义
  17. 夜神模拟器连接Android Studio
  18. 麦克马斯特计算机工程专业,麦克马斯特大学电气与计算机工程申请要求
  19. windows电脑启动问题-0xc000000d
  20. No value specified for parameter 15排查过程

热门文章

  1. ASP.NET 对类进行XML序列化和反序列化
  2. GUI 快捷键的实现思路
  3. poj 3436 (最大流)
  4. 20 best jquery 截图
  5. modbus注意几点
  6. linux内存初始化初期内存分配器——memblock
  7. oracle部署--安装oracle软件与部署单实例数据库
  8. 深入框架本源系列 —— Virtual Dom
  9. JS之Promise
  10. maven建立webapp项目时显示Cannot change version of project facet Dynamic web module to 2.5