获取浏览器视口大小

2019-12-26 本文已影响0人简公孙策

浏览器视口：

概念：浏览器用来显示网页的区域
兼容模式：文档的兼容模式document.compat有两种，一种是开头声明了文档类型<!DOCTYPE html>,称为标准模式（CSS1Compat）;另一种是没有进行文档声明，称作怪异模式或者混杂模式（BackCompat）
获取视口大小：

   function getScreen() {
        let width , height;
        if(window.innerHeight) {
            //该方法获取的视口宽高是将滚动条包含在内的，后面的两种方法都不包含滚动条
            width = window.innerWidth;
            height = window.innerHeight;
        }else if(document.compatMode === 'BackCompat') {
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }else {
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        }
        return {
            width: width,
            height: height
        }
    }

注：在标准模式下，document.documentElement.clientHeight表示浏览器视口大小，document.body.clientHeight表示网页大小；而在怪异模式下，二者恰恰相反。
当然，利用documet.documentElement.offsetHeight 或 document.body.offsetHeight同样可以获取网页大小。

获取浏览器视口大小

猜你喜欢

热点阅读