JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理-前端开发

获取屏幕、浏览器、页面的宽度和高度是前端开发中常见的需求，Javascript和jQuery都提供了相关的API来实现这个功能。下面我们来一步步剖析如何获取宽高以及它们之间的区别。

获取屏幕、浏览器、页面的宽度和高度是前端开发中常见的需求，Javascript和jQuery都提供了相关的API来实现这个功能。下面我们来一步步剖析如何获取宽高以及它们之间的区别。

获取屏幕宽高（Javascript）

可以使用window.screen对象来获取屏幕的宽高。

var screenWidth = window.screen.width; // 屏幕宽度
var screenHeight = window.screen.height; // 屏幕高度

获取浏览器窗口宽高（Javascript）

可以使用window.innerWidth和window.innerHeight对象获取浏览器窗口的宽高。但是，这些对象的值包含滚动条所占的宽或高，所以要获取不包含滚动条的宽高，还要排除滚动条的宽高。如下所示：

var bodyWidth = document.body.clientWidth; // 浏览器可视区域宽度
var bodyHeight = document.body.clientHeight; // 浏览器可视区域高度
var documentWidth = document.documentElement.clientWidth; // 浏览器窗口文档对象宽度
var documentHeight = document.documentElement.clientHeight; // 浏览器窗口文档对象高度

获取页面宽高（Javascript）

可以使用document对象获取页面文档的宽高。

var pageWidth = document.documentElement.scrollWidth; // 页面文档对象宽度
var pageHeight = document.documentElement.scrollHeight; // 页面文档对象高度

获取屏幕、浏览器、页面的宽度和高度（jQuery）

当然，jQuery也提供了获取屏幕、浏览器、页面宽高的API，使用方法如下：

var screenWidth = $(window).width(); // 屏幕宽度
var screenHeight = $(window).height(); // 屏幕高度
var bodyWidth = $(document.body).width(); // 浏览器可视区域宽度
var bodyHeight = $(document.body).height(); // 浏览器可视区域高度
var documentWidth = $(document).width(); // 浏览器窗口文档对象宽度
var documentHeight = $(document).height(); // 浏览器窗口文档对象高度
var pageWidth = $(document.body)[0].scrollWidth; // 页面文档对象宽度
var pageHeight = $(document.body)[0].scrollHeight; // 页面文档对象高度

需要注意的是，通过jQuery获取的值不包含滚动条所占的宽高，如要获取包含滚动条的宽高，还要加上滚动条的宽高。

示例说明：

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        body {
            width: 1000px;
            height: 5000px;
        }
        .page {
            margin: 30px auto;
            width: 80%;
            height: 500px;
            background-color: #e5e5e5;
            line-height: 500px;
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <script>
        console.log(window.screen.width, window.screen.height);
        console.log(document.body.clientWidth, document.body.clientHeight);
        console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
        console.log(document.body.scrollWidth, document.body.scrollHeight);

        console.log($(window).width(), $(window).height());
        console.log($(document.body).width(), $(document.body).height());
        console.log($(document).width(), $(document).height());
        console.log($(document.body)[0].scrollWidth, $(document.body)[0].scrollHeight);
    </script>
</body>
</html>

在浏览器中打开这个html文件，可以看到浏览器窗口的宽度和高度，以及页面文档对象的宽度和高度分别被输出在控制台中。同时，还能看到页面展示出了三个高度为500px的块，可以通过观察结果证明所获取的宽高值是正确的。