/**
 * @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. mysql内连接

    inner join(等值连接) 只返回两个表中联结字段相等的行 select * from role_action ra INNER JOIN action a on ra.action_id = ...

  2. cb38a_c++_STL_算法_transform

    cb38a_c++_STL_算法_transformtransform()算法有两种形式:transform(b1,e1,b2,op);//b1(源区间)的数据通过op函数处理,存放在b2(目标区间) ...

  3. mapper.xml文件映射配置

    一.导入约束 为全局配置文件绑定dtd约束: 1)联网会自动绑定 2)没网的时候[/org/apache/ibatis/builder/xml/mybatis-3-mapper.dtd]:解压myba ...

  4. Redis命令速查

    目录 string list set zset hash 记录下常用的,方便查找 string 内部sds,动态扩容.小于1M加倍扩,大于1M每次扩容1M.最大长度512M. SET name val ...

  5. mysql主从同步失败 Relay log read failure: Could not parse relay log event entry

    mysql: [Warning] Using a password on the command line interface can be insecure. Welcome to the MySQ ...

  6. Latex文件本机能正常编译，但在另一台电脑不能编译的解决方法

    问题:同样的文件在台式机能编译出正常的PDF文件,但发现在另一个电脑上不能编译出PDF文件. \documentclass[preprint,10pt,5p,times,twocolumn]{elsa ...

  7. Redis 持久化-AOF自动重写配置

    AOF自动重写 auto-aof-rewrite-min-size size auto-aof-rewrite-percentage percent 在 redis.conf 自动重写的默认配置: a ...

  8. js语法基础入门（3）

    3.数据类型 3.1.数据类型学习重点 前面我们通俗的讲了,数据类型其实就是对数据进行了分类,那么,在js中到底把数据分成了几类?这些类的名称叫什么?每个分类下面有那些值?这些问题是需要记清楚的,例如 ...

  9. int与bigdecimal的相互转换

    int转bigdecimal BigDecimal number = new BigDecimal(0); int value=score; number=BigDecimal.valueOf((in ...

  10. Centos7安装部署openstack--nova计算服务

    一.概述 使用OpenStack计算服务来托管和管理云计算系统.OpenStack计算服务是基础设施即服务(IaaS)系统的主要部分,模块主要由Python实现. OpenStack计算组件请求Ope ...