/**
 * @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. 0.1---selenium+java自动化测试进阶02----项目实战之登录代码重构

    一.测试登录功能实现 以慕课网的登录为例,分析登录的功能需求,编写测试用例,找到要定位的元素以及需要的操作,编写登录功能的测试代码.代码实现如下: public static void main(St ...

  2. 记PHP下载大文件失败的一次坑

    说明 php提供文件的储存和下载,nginx作为web服务器,fpm做解析. 现象 当下载一个5M大小的图片时,总提示下载失败,或下载下来的文件不完整,仅显示部分图像(每次下载不一样) php下载相关 ...

  3. [置顶] linux中fork（）函数详解（原创！！实例讲解）

    分类: 计算机系统 linux2010-06-01 23:35 60721人阅读 评论(105) 收藏 举报 linux2010存储  一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源 ...

  4. MyBatis入门学习-连接oracle实现CURD基本操作

    目录 前言 导入oracle库 配置 环境配置 配置引用 配置映射 查询 单条件查询 多条件查询 通过类字段传递参数 通过Map接口传参 Param注解 插入 更新 删除 字段映射 参考文献 前言 本 ...

  5. java 中的 自定义viewUtils框架

    在前面学习的基础上,我们自己编写一个ViewUtils注解框架类,不清楚的原理看前面的源代码 package im.weiyuan.com.viewutils; import android.supp ...

  6. 入门大数据---Kafka的搭建与应用

    前言 上一章介绍了Kafka是什么,这章就讲讲怎么搭建以及如何使用. 快速开始 Step 1:Download the code Download the 2.4.1 release and un-t ...

  7. python+opencv实现图像自适应阈值的均衡化

    内容涉及:列表遍历,图像均衡化,图像通道分离与合并 import cv2 import numpy as np import os for path in open("org_junheng ...

  8. MFC中窗口静态分割&视图切换

    目录 窗口静态分割 单个分割器 声明 准备视图 静态分割窗口&添加视图 使视图大小随窗口大小改变 多个分割器 声明 静态分割窗口&添加视图 使视图大小随窗口大小改变 视图切换 视图之间 ...

  9. 如何在Vim中更改颜色和主题

    大家好,我是良许. Vim是我们在Linux中非常常用的一款文本编辑器.Vim 是一款免费.开源的文本编辑器,它的功能和许多其他的文本编辑器大致相同,比如 Sublime 和 Notepad++ .V ...

  10. LeetCode59. 螺旋矩阵 II

    这题和第54题类似,都是套一个搜索的模板. 用dx和dy表示方向,方向的顺序是先向右,再向下,再向左,再向上,再向右... 如果"撞墙"了就需要改变到下一个方向."撞墙& ...