正文

掌握浏览器尺寸：JavaScript 动态获取屏幕宽高及视口大小全攻略

/0 浏览量
1012

在网页开发中，了解浏览器尺寸对于实现响应式设计、布局调整以及用户体验优化至关重要。本文将详细讲解如何使用 JavaScript 动态获取屏幕宽高以及视口大小，帮助你更好地掌握浏览器尺寸。

获取屏幕宽高

1. window.innerWidth 和 window.innerHeight

window.innerWidth 和 window.innerHeight 属性可以获取浏览器窗口的内部宽度和高度，不包括工具栏和滚动条等。

var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;

2. document.documentElement.clientWidth 和 document.documentElement.clientHeight

document.documentElement.clientWidth 和 document.documentElement.clientHeight 属性可以获取文档元素的宽度和高度，同样不包括滚动条等。

var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;

3. document.body.clientWidth 和 document.body.clientHeight

document.body.clientWidth 和 document.body.clientHeight 属性可以获取文档体元素的宽度和高度，不包括滚动条等。

var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;

获取视口大小

1. window.innerWidth 和 window.innerHeight

与获取屏幕宽高类似，window.innerWidth 和 window.innerHeight 也可以获取视口的宽度和高度。

2. document.documentElement.clientWidth 和 document.documentElement.clientHeight

与获取屏幕宽高类似，document.documentElement.clientWidth 和 document.documentElement.clientHeight 也可以获取视口的宽度和高度。

3. document.body.clientWidth 和 document.body.clientHeight

与获取屏幕宽高类似，document.body.clientWidth 和 document.body.clientHeight 也可以获取视口的宽度和高度。

监听浏览器尺寸变化

为了在浏览器尺寸变化时执行某些操作，可以使用 resize 事件监听器。

window.addEventListener('resize', function() {
    var screenWidth = window.innerWidth;
    var screenHeight = window.innerHeight;
    // 执行相关操作
});

实战案例：响应式布局

以下是一个简单的响应式布局示例，根据浏览器尺寸调整页面元素宽度。

<!DOCTYPE html>
<html>
<head>
    <title>响应式布局示例</title>
    <style>
        .container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>响应式布局示例</h1>
        <p>这是一个响应式布局示例，根据浏览器尺寸调整页面元素宽度。</p>
    </div>
    <script>
        window.addEventListener('resize', function() {
            var screenWidth = window.innerWidth;
            if (screenWidth < 600) {
                // 调整样式
                document.querySelector('.container').style.maxWidth = '100%';
            } else {
                document.querySelector('.container').style.maxWidth = '600px';
            }
        });
    </script>
</body>
</html>

通过以上内容，相信你已经掌握了使用 JavaScript 动态获取屏幕宽高及视口大小的方法。在实际开发中，灵活运用这些技巧，可以帮助你更好地实现响应式设计和优化用户体验。

-- 展开阅读全文 --