javacript获取当前屏幕大小

2023年6月11日上午5:07 • JavaScript

获取当前屏幕大小可以通过JavaScript的内置对象window来实现。使用window对象提供的属性和方法可以获取浏览器窗口的相关信息。

方法一：使用innerWidth和innerHeight属性获取屏幕大小

window.innerWidth属性返回浏览器窗口的视口宽度，即不包括滚动条的宽度。window.innerHeight属性返回浏览器窗口的视口高度，即不包括浏览器窗口顶部和底部工具栏的高度。

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

这里使用了常量来保存屏幕大小。如果需要在页面加载后动态获取屏幕大小，可以将上面的代码放到window.onload事件的回调函数中。

方法二：使用document.documentElement.clientWidth和document.documentElement.clientHeight属性获取屏幕大小

另一种获取屏幕大小的方法是使用document.documentElement.clientWidth和document.documentElement.clientHeight属性。这两个属性返回浏览器窗口的视口宽度和高度，除了不包括滚动条和工具栏之外，还不包括边框和边框内的距离。

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

与第一种方法不同，这里使用的是document.documentElement属性，即HTML文档元素。与window对象类似，在HTML文档中也有一些内置对象，document.documentElement就是其中之一。

示例一：根据屏幕大小调整网页布局

下面是一个示例，根据屏幕大小动态调整网页布局。当浏览器窗口的宽度小于800像素时，显示为单列布局，否则显示为两列布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Adjust layout based on screen size</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }
        .item {
            width: 100%;
            height: 100px;
            margin: 10px;
            background-color: gray;
        }
        @media (min-width: 800px) {
            .container {
                flex-direction: row;
                flex-wrap: wrap;
            }
            .item {
                width: 45%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        window.onload = function() {
            const screenWidth = window.innerWidth;
            if (screenWidth < 800) {
                document.querySelector('.container').style.flexDirection = 'column';
            }
        }
    </script>
</body>
</html>

在上面的代码中，使用了CSS的flex布局来实现容器和项目的排列。当屏幕宽度大于等于800像素时，使用flex-wrap属性将项目分行显示；当屏幕宽度小于800像素时，使用JavaScript动态修改容器的flex-direction属性实现单列布局。

示例二：根据屏幕大小决定是否展示图像

下面是另一个示例，根据屏幕宽度决定是否展示图像。当屏幕宽度小于800像素时，不展示图片，否则展示图片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Show/hide image based on screen size</title>
</head>
<body>
    <img src="image.jpg" alt="Image" id="image">
    <script>
        window.onload = function() {
            const screenWidth = window.innerWidth;
            if (screenWidth < 800) {
                document.querySelector('#image').style.display = 'none';
            }
        }
    </script>
</body>
</html>

在上面的代码中，使用JavaScript动态修改图片的display属性。当屏幕宽度小于800像素时，设置为none，表示不显示；否则不需要修改属性值，使用默认值inline即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javacript获取当前屏幕大小 - Python技术站