📌  相关文章
📜  如何使用 jQuery 获取屏幕、当前网页和浏览器窗口的大小？(1)

📅  最后修改于: 2023-12-03 14:51:59.118000             🧑  作者: Mango

如何使用 jQuery 获取屏幕、当前网页和浏览器窗口的大小？

通过使用 jQuery，我们可以轻松地获取屏幕、当前网页和浏览器窗口的大小。以下是一些常用的方法和代码示例。

获取屏幕大小

要获取屏幕的尺寸，可以使用 $(window).height() 和 $(window).width() 方法。

// 获取屏幕高度
var screenHeight = $(window).height();

// 获取屏幕宽度
var screenWidth = $(window).width();
获取当前网页大小

要获取当前网页的尺寸，可以使用 $(document).height() 和 $(document).width() 方法。

// 获取网页的高度
var pageHeight = $(document).height();

// 获取网页的宽度
var pageWidth = $(document).width();
获取浏览器窗口大小

要获取浏览器窗口的尺寸，可以使用 $(window).innerHeight() 和 $(window).innerWidth() 方法。

// 获取浏览器窗口的高度，包括滚动条
var windowHeight = $(window).innerHeight();

// 获取浏览器窗口的宽度，包括滚动条
var windowWidth = $(window).innerWidth();
示例代码

以下是一个完整的示例代码，展示如何使用 jQuery 获取屏幕、当前网页和浏览器窗口的大小。

<!DOCTYPE html>
<html>
<head>
  <title>获取窗口大小示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>获取窗口大小示例</h1>
  <p>屏幕高度: <span id="screen-height"></span></p>
  <p>屏幕宽度: <span id="screen-width"></span></p>
  <p>网页高度: <span id="page-height"></span></p>
  <p>网页宽度: <span id="page-width"></span></p>
  <p>窗口高度: <span id="window-height"></span></p>
  <p>窗口宽度: <span id="window-width"></span></p>

  <script>
    $(document).ready(function() {
      // 获取屏幕尺寸
      var screenHeight = $(window).height();
      var screenWidth = $(window).width();
      $('#screen-height').text(screenHeight);
      $('#screen-width').text(screenWidth);

      // 获取网页尺寸
      var pageHeight = $(document).height();
      var pageWidth = $(document).width();
      $('#page-height').text(pageHeight);
      $('#page-width').text(pageWidth);

      // 获取窗口尺寸
      var windowHeight = $(window).innerHeight();
      var windowWidth = $(window).innerWidth();
      $('#window-height').text(windowHeight);
      $('#window-width').text(windowWidth);
    });
  </script>
</body>
</html>

请注意，在使用上述代码片段时，确保已经引入了最新版本的 jQuery 库。通过在 head 标签中添加 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>，即可引入 jQuery。