js 获取屏幕分辨率|极客笔记

js 获取屏幕分辨率

在前端开发中，获取屏幕分辨率是一个常见的需求。通过获取屏幕分辨率，我们可以根据不同设备的分辨率来进行页面布局等适配操作，以确保页面在不同设备上有较好的展示效果。在本文中，我们将探讨如何使用JavaScript来获取屏幕分辨率。

window.screen 对象

在JavaScript中，我们可以通过window对象的screen属性来获取屏幕相关的信息，包括屏幕的宽度和高度，像素深度等。screen对象有以下一些属性可以获取屏幕分辨率信息：

screen.width: 返回屏幕的宽度（以像素为单位）
screen.height: 返回屏幕的高度（以像素为单位）
screen.availWidth: 返回屏幕可用工作区的宽度（以像素为单位）
screen.availHeight: 返回屏幕可用工作区的高度（以像素为单位）

下面是一个简单的示例代码，演示如何使用这些属性获取屏幕分辨率信息：

// 获取屏幕宽度和高度
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

// 获取可用工作区宽度和高度
var availWidth = window.screen.availWidth;
var availHeight = window.screen.availHeight;

console.log("屏幕宽度: " + screenWidth + "px");
console.log("屏幕高度: " + screenHeight + "px");
console.log("可用工作区宽度: " + availWidth + "px");
console.log("可用工作区高度: " + availHeight + "px");

当我们运行上述代码时，会输出当前设备的屏幕宽度、高度以及可用工作区的宽度和高度。这些信息可以帮助我们更好地了解当前设备的分辨率情况。