获取当前屏幕大小可以通过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技术站
微信扫一扫 
支付宝扫一扫 