/**
 * @description js自定义获取浏览器宽高
 *
 * IE8 和 IE8 以下的浏览器不兼容
 * window.innerWidth
 * window.innerHeight
 *
 * html 头文件部加 <!doctype html>  表示启用标准模式
 * 标准模式 兼容所有浏览器
 *
 * document.body.clientWidth
 * document.body.clientHeight
 *
 * document.documentElement.clientWidth
 * document.documentElement.clientHeight
 *
 * @returns {width:0,height:0}
 */
function getViewPortOffset(){
    if(window.innerWidth){
        return {
            width:window.innerWidth,
            height:window.innerHeight
        }
    }else{
        //混杂模式（兼容IE8以下）
        if(document.compatMode == 'BackCompat'){
            return{
                width:document.body.clientWidth,
                height:document.body.clientHeight
            }
        }else{
            return {
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
    }
}

js自定义获取浏览器宽高的更多相关文章

  1. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  2. 转载：JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  3. js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.bo ...

  4. js获取浏览器宽高

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. jquery获取浏览器宽高

    满足获取各种高的需求 $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(documen ...

  6. js上传图片获取原始宽高

    以vue上传图片为例: <template> <div> <input type="file" @change="uploadFile($e ...

  7. [Jquery] Jquery获取浏览器宽高的代码

    <script type="text/javascript"> $(document).ready(function() { alert($(window).heigh ...

  8. js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...

  9. JQ关于浏览器宽高的获取方式

    JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度 ...

随机推荐

  1. StringBuilder（拼接字符串省内存）

    观察如下代码: String s = ""; for (int i = 0; i < 1000; i++) { s = s + "," + i; } 虽然 ...

  2. SpringMVC的url-pattern配置及原理剖析

    SpringMVC的url-pattern配置及原理剖析 xml里面配置标签: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc./ ...

  3. mysql忘记root密码后，重新设置、修改root密码

    大致步骤如下(这个步骤针对5.7版本,8.0之后版本修改方式有所改变,版本为8.0之后的可自行搜索相关修改方法) 1. 关闭正在运行的mysql服务,确保mysql服务要先关闭2. 打开dos窗口,转 ...

  4. VScode快捷键集锦（持续更新）

    本文的快捷键是根据VScode for mac来的,Windows和Linux用户可能需要些许改动. 注释:cmd + /  注释当前选中的行,或者注释掉选中的行,再按一次反注释.还可以在按cmd + ...

  5. Java并发编程的艺术（一、二章） ——学习笔记

    第一章  并发编程的挑战 需要了解的一些概念 转自 https://blog.csdn.net/TzBugs/article/details/80921351 (1) 同步VS异步 同步和异步通常用来 ...

  6. PyCharm远程连接服务器简明教程

    转自本人知乎(https://zhuanlan.zhihu.com/p/149040742) 由于实验室的GPU都是放在远程服务器上,因此一直使用MobaXterm利用SSH远程跑实验,但是MobaX ...

  7. 成为python程序员，对疫情过后的毕业生来说，真是一个不错的方向吗？

    Python最近几年,一直被炒得很火,这其中有商业因素,但更重要的是即将到来的人工智能时代,而python就恰好是最适合的编程语言. 所以无论是在职的人,还是在校的学生,都想着跟上这一趋势,但,在今年 ...

  8. Java中的四种引用方式

      无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...

  9. Javascript数组迭代精髓，拿去花

    数组迭代 数组迭代是处理各数组的利器,编写代码时常常会用到,为我们提供了大大的便利.如果还不知道,真的别告诉别人你知道js哈哈. 以下迭代方法均不会改变原数组,带*为必选对象. 1.arr.forEa ...

  10. Python3-paramiko模块-基于SSH的远程连接模块

    Python3中的paramiko模块,基于SSH用于连接远程服务器并执行相关操作 http://docs.paramiko.org/en/2.1/ SSHClient 用于连接远程服务器并执行基本命 ...