在HTML中获取屏幕信息主要通过JavaScript的window.screen对象实现，常用属性包括screen.width和screen.height获取屏幕总分辨率，screen.availWidth和screen.availHeight获取可用屏幕尺寸（排除任务栏等系统界面），window.innerWidth和innerHeight可获取浏览器窗口可视区域大小，outerWidth和outerHeight则获取浏览器窗口总尺寸，结合CSS的@media媒体查询，可根据屏幕特性（如宽度、分辨率）响应式调整布局，这些方法能帮助开发者适配不同设备屏幕，优化用户体验。
掌握屏幕信息：Web 开发中的实用指南
在 Web 开发领域，精准获取屏幕信息是实现响应式设计、跨设备适配以及优化用户体验的基石，虽然 HTML 本身是静态标记语言，但通过结合 JavaScript，我们可以轻松访问屏幕的物理尺寸、浏览器视口大小、设备像素比（DPR）以及屏幕方向等关键信息，本文将深入探讨几种核心的 JavaScript 方法（常在 HTML 环境中使用）来获取这些屏幕数据,并详细阐述它们在实际开发中的应用场景。
获取屏幕物理分辨率：`window.screen` 对象
`window.screen` 对象提供了访问用户显示器硬件信息的接口，包括屏幕的完整物理分辨率（像素总数）以及浏览器可用的显示区域（排除了操作系统任务栏、Dock 等固定界面元素）。
屏幕物理尺寸：`screen.width` 和 `screen.height`
screen.width：返回屏幕的物理宽度，单位为像素（px）,代表显示器横向的像素点总数。screen.height：返回屏幕的物理高度，单位为像素（px）,代表显示器纵向的像素点总数。
这两个属性直接反映了显示器的硬件分辨率，一台标称 1920x1080 的显示器，其 `screen.width` 值为 1920，`screen.height` 值为 1080。
示例代码：
const screenWidth = screen.width;
const screenHeight = screen.height;
console.log(`屏幕物理分辨率：${screenWidth} x ${screenHeight}px`);
可用屏幕尺寸：`screen.availWidth` 和 `screen.availHeight`
screen.availWidth：返回浏览器窗口可用的最大宽度（单位 px），排除了操作系统任务栏、Dock 等固定区域占据的空间。screen.availHeight：返回浏览器窗口可用的最大高度（单位 px），同样排除了操作系统任务栏、Dock 等固定区域占据的空间。
如果操作系统任务栏高度为 30px，则 `screen.availHeight` 的值会比 `screen.height` 小 30px,这对于需要全屏展示或精确计算可用空间的应用至关重要。
示例代码：
const availableWidth = screen.availWidth;
const availableHeight = screen.availHeight;
console.log(`屏幕可用分辨率：${availableWidth} x ${availableHeight}px`);
应用场景
- 全屏应用开发：（如视频播放器、游戏界面）完全在可用屏幕区域内渲染,避免被系统界面遮挡。
- 多显示器环境优化：检测用户是否连接了多个显示器，并获取每个显示器的分辨率信息,以实现跨屏布局或智能窗口管理。
- 大屏/触控设备适配：在交互式展示或触控应用中,根据屏幕物理尺寸调整控件大小和间距。
获取浏览器视口尺寸：`window` 对象与 `document` 对象
视口（Viewport）是浏览器窗口中实际用于渲染和显示网页内容的区域，其尺寸会随着浏览器窗口大小改变、设备旋转或浏览器缩放而动态变化，主要通过 `window` 对象和 `document.documentElement` 对象的属性来获取。
视口尺寸（包含滚动条）：`window.innerWidth` 和 `window.innerHeight`
window.innerWidth：返回视口的宽度（单位 px），**包含**垂直滚动条的宽度（如果滚动条可见）。window.innerHeight：返回视口的高度（单位 px），**包含**水平滚动条的高度（如果滚动条可见）。
这两个属性提供的是视口的“毛尺寸”，其值会实时响应窗口大小调整、滚动条出现/消失以及浏览器缩放（如 Ctrl +/-）。
示例代码：
const viewportWidthIncludingScrollbar = window.innerWidth;
const viewportHeightIncludingScrollbar = window.innerHeight;
console.log(`视口尺寸（含滚动条）：${viewportWidthIncludingScrollbar} x ${viewportHeightIncludingScrollbar}px`);
视口尺寸（不包含滚动条）：`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`
document.documentElement.clientWidth：返回视口的宽度（单位 px），**不包含**垂直滚动条的宽度。document.documentElement.clientHeight：返回视口的高度（单位 px），**不包含**水平滚动条的高度。
这两个属性提供的是视口的“净尺寸”，代表了内容区域可用的实际空间，不受滚动条状态影响，在计算布局、设置容器高度或进行响应式断点判断时，**更常用**这两个值。
示例代码：
const viewportWidthExcludingScrollbar = document.documentElement.clientWidth;
const viewportHeightExcludingScrollbar = document.documentElement.clientHeight;
console.log(`视口尺寸（不含滚动条）：${viewportWidthExcludingScrollbar} x ${viewportHeightExcludingScrollbar}px`);
监听视口变化：`resize` 事件
当浏览器窗口大小改变时（如用户拖拽窗口边缘、旋转移动设备、调整浏览器缩放比例），可以通过监听 `window` 对象的 `resize` 事件来捕获变化，并执行相应的回调函数（如重新计算布局、更新元素样式）。
示例代码：
function handleViewportResize() {
const currentWidth = document.documentElement.clientWidth; // 建议使用净尺寸
const currentHeight = document.documentElement.clientHeight;
console.log(`视口尺寸已更新：${currentWidth} x ${currentHeight}px`);
// 在此执行响应式布局更新逻辑
}
// 添加事件监听
window.addEventListener('resize', handleViewportResize);
// 注意：为避免频繁触发，可考虑使用防抖（debounce）或节流（throttle）技术优化性能
