JS获取当前屏幕宽度|极客笔记

JS获取当前屏幕宽度

在前端开发中，经常会遇到需要获取当前屏幕宽度的情况，以便做出相应的布局调整或者适配。本文将详细介绍如何使用JavaScript来获取当前屏幕的宽度，并给出实际的代码示例。

1. 使用window对象获取屏幕宽度

在JavaScript中，我们可以使用window对象的innerWidth属性来获取当前浏览器窗口的宽度，即屏幕宽度的大小。innerWidth属性返回的是一个整数值，表示窗口的视口宽度，不包括边框、滚动条和其他浏览器的 UI 元素宽度。

下面是一个简单的示例代码，演示如何获取当前屏幕的宽度：

const screenWidth = window.innerWidth;
console.log("当前屏幕宽度为：" + screenWidth + "px");

运行上述代码后，将会在控制台打印出当前屏幕的宽度（单位为像素）。

2. 响应式设计中的屏幕宽度检测

在响应式设计中，我们通常会根据不同屏幕宽度的大小来做出相应的布局调整或显示优化。通过JavaScript获取当前屏幕宽度，我们可以根据不同的条件来动态地改变页面的展示效果。

下面是一个简单的示例代码，演示如何根据屏幕宽度的不同，在不同范围内显示相应的信息：

const screenWidth = window.innerWidth;

if (screenWidth < 768) {
    console.log("当前屏幕宽度小于768px，展示手机版页面布局");
} else if (screenWidth >= 768 && screenWidth < 1024) {
    console.log("当前屏幕宽度介于768px和1024px之间，展示平板版页面布局");
} else {
    console.log("当前屏幕宽度大于等于1024px，展示桌面版页面布局");
}

根据不同的屏幕宽度范围，上述代码将在控制台输出相应的信息。

3. 监听屏幕宽度变化

除了获取当前屏幕宽度外，有时候我们还需要实时监测屏幕宽度的变化，并作出相应的调整。为了实现这一功能，我们可以借助resize事件来监听窗口大小的变化。

下面是一个示例代码，演示如何监听屏幕宽度的变化并实时输出当前屏幕宽度：

window.addEventListener("resize", function() {
    const screenWidth = window.innerWidth;
    console.log("当前屏幕宽度为：" + screenWidth + "px");
});

当用户调整浏览器窗口大小时，上述代码将会在每次窗口大小变化时输出当前的屏幕宽度。

通过以上介绍，我们了解了如何使用JavaScript获取当前屏幕的宽度，并在响应式设计中应用这一功能。

JS获取当前屏幕宽度