/**
 * @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. python工业互联网应用实战2—从需求开始

    前言:随着国家工业2025战略的推进,工业互联网发展将会提速,将迎来一个新的发展时期,越来越多的企业开始逐步的把产线自动化,去年年底投产的小米亦庄的智能工厂就是一个热议的新闻.小米/华为智能工厂只能说 ...

  2. 从字符串到常量池，一文看懂String类设计

    从一道面试题开始 看到这个标题,你肯定以为我又要讲这道面试题了 // 这行代码创建了几个对象? String s3 = new String("1"); 是的,没错,我确实要从这里 ...

  3. Laravel:No application encryption key has been specified.

    其实吧,这个就是你没有生成密钥 你首先去看看,如果是刚刚下载的lavavel应该会有一个.env.example文件在根目录下,然后修改这个文件名,改成.env 然后用命令行去执行php artisa ...

  4. cc21a -c++重载成员操作符*，->,代码示范

    cc21a重载成员操作符*,->, *,解引用操作符 ->箭头操作符,用于智能指针类 #include "pointer.h" //pointer.cpp #inclu ...

  5. JAVA 经典算法 40 例

    [程序 1] 题目:古典问题:有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 1.程序分析: 兔子的规律为数列 ...

  6. JVM之HotSpot虚拟机是如何发起内存回收的?

    1.背景 在上一节中,我们掌握了垃圾收集的一些算法,也弄明白了分代回收的原理, 那么HotSpot虚拟机是如何发起内存回收的? 2.如何找到GC Roots根节点(枚举根节点) 从可达性分析中GC R ...

  7. 黎活明8天快速掌握android视频教程--23_网络通信之网络图片查看器

    1.首先新建立一个java web项目的工程.使用的是myeclipe开发软件 图片的下载路径是http://192.168.1.103:8080/lihuoming_23/3.png 当前手机和电脑 ...

  8. 【故障公告】阿里云 RDS 实例 CPU 100% 故障引发全站无法正常访问

    非常抱歉,今天凌晨 3:20~8:30 左右,我们使用的阿里云 RDS 实例 SQL Server 2016 标准版突然出现 CPU 100% 故障,造成全站无法正常访问,由此给您带来巨大的麻烦,请您 ...

  9. MongoDB入门四

    MongoDB针对实时位置 db.CallRecordInfo.find().count()db.SendInfo.find().count()db.RiderReaTimePositon.find( ...

  10. python高阶-Linux基础命令集

    声明: 1)仅作为个人学习,如有冒犯,告知速删! 2)不想误导,如有错误,不吝指教! 1: 查看文件信息:ls ls常用参数: 参数 含义 -a 显示指定目录下所有子目录与文件,包括隐藏文件 -l 以 ...