/**
 * @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. [Cadence] 10个Cadence AD PADS经典案例 2-12层板设计

    [Cadence] 10个Cadence Allegro经典案例 2-12层板设计 自己保存的PCB例程资料分享 Allegro AD PADS看下面截图需要的拿去 下载链接 链接: https:// ...

  2. Android学习笔记数组资源文件

    在android中我们可以通过数组资源文件,定义数组元素. 数组资源文件是位于values目录下的 array.xml <?xml version="1.0" encodin ...

  3. 图解MySQL索引(三)—如何正确使用索引？

    MySQL使用了B+Tree作为底层数据结构,能够实现快速高效的数据查询功能.工作中可怕的是没有建立索引,比这更可怕的是建好了索引又没有使用到.本文将围绕着如何优雅的使用索引,图文并茂地和大家一起探讨 ...

  4. ca70a_c++_重载函数_实参类型转换

    /*ca70a_c++_重载函数_实参类型转换转换等级,详见P290 编译选择哪个函数版本呢?1.精确匹配2.通过类型提升3.通过标准转换4.通过类类型转换参数匹配和枚举类型重载和const形参 vo ...

  5. 2.K8S的核心资源管理方法

    目录 1.1陈述式资源管理方法 1.1.1.管理名称空间资源 1.1.2.管理Deployment资源 1.1.3.管理Service资源 1.1.4.kubectl用法总结 1.2.声明式资源管理方 ...

  6. Azure AD B2C（二）使用Azure AD B2C为ASP.NET Core 应用设置社交帐户（邮箱）登录/注册

    一,引言 上次关于Azure AD B2C 讲到一些概念,有介绍到,Azure AD B2C 也是一种身份验证的解决方案,但是它运行客户使用其首选的社交,企业或者本地账户标识对应用程序和API进行单一 ...

  7. 490. The Maze

    原题链接:https://leetcode.com/articles/the-maze/ 这道题目是需要冲会员才能使用的,然而我个穷逼现在还是失业状态根本冲不起...以后如果把免费题目都刷完了的话,再 ...

  8. Spring IoC 默认标签解析

    前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...

  9. IOT设备SmartConfig实现

    一般情况下,IOT设备(针对wifi设备)在智能化过程中需要连接到家庭路由.但在此之前,需要将wifi信息(通常是ssid和password,即名字和密码)发给设备,这一步骤被称为配网.移动设备如An ...

  10. MongoDB快速入门教程 （2）

    2.MongoDB的基本的CRUD操作 2.1.创建文档 在具体操作之前,想要知道有多少数据库,可以执行下面命令 show dbs 在mongodb中,数据库中包含的叫做集合(表),集合中存储的内容叫 ...