极客笔记js 获取屏幕宽高
在Web开发中，有时候我们需要获取用户设备的屏幕尺寸，以便我们根据不同的屏幕尺寸来做出相应的调整。这篇文章将详细介绍如何使用JavaScript获取用户设备的屏幕宽度和高度。
1. 使用window对象获取屏幕宽高
在JavaScript中，我们可以使用window对象来获取用户设备的屏幕宽度和高度。window对象是一个全局对象，代表当前浏览器窗口。
1.1 获取屏幕宽度
我们可以使用window.innerWidth属性来获取用户设备的屏幕宽度，这个属性返回浏览器窗口的视口宽度（不包括滚动条）。
const screenWidth = window.innerWidth;
console.log("屏幕宽度：" + screenWidth + "px");
运行上面的代码，将会打印出用户设备的屏幕宽度。
1.2 获取屏幕高度
类似的，我们可以使用window.innerHeight属性来获取用户设备的屏幕高度，这个属性返回浏览器窗口的视口高度（不包括滚动条）。
const screenHeight = window.innerHeight;
console.log("屏幕高度：" + screenHeight + "px");
运行上面的代码，将会得到用户设备的屏幕高度。
2. 使用screen对象获取屏幕宽高
除了window对象，JavaScript还提供了screen对象来获取用户设备的屏幕信息，包括分辨率等。
2.1 获取屏幕分辨率
我们可以使用screen.width和screen.height属性来获取用户设备的屏幕分辨率，这两个属性分别返回屏幕的宽度和高度。
const screenWidth = screen.width;
const screenHeight = screen.height;
console.log("屏幕分辨率：" + screenWidth + "x" + screenHeight);
运行上面的代码，将会输出用户设备的屏幕分辨率。
2.2 获取屏幕可用工作区尺寸
除了分辨率外，有时候我们还需要获取屏幕的可用工作区尺寸，即不包括操作系统任务栏的尺寸。我们可以使用screen.availWidth和screen.availHeight属性来获取。
const availScreenWidth = screen.availWidth;
const availScreenHeight = screen.availHeight;
console.log("屏幕可用工作区尺寸：" + availScreenWidth + "x" + availScreenHeight);
运行上面的代码，将会输出用户设备的屏幕可用工作区尺寸。
3. 结语
通过window对象和screen对象，我们可以轻松地获取用户设备的屏幕宽度和高度，以及其他相关的屏幕信息。在实际开发中，根据不同的需求，我们可以灵活运用这些信息来优化用户体验，使我们的网页能够在不同设备上有更好的展示效果。