浏览器窗口尺寸相关的API整理(基础)

Screen接口

Screen 接口表示一个屏幕窗口，往往指的是当前正在被渲染的 window 对象，可以使用 window.screen 获取它。

• API的相关配置

注：设备以Windows系统为主

1. width:
2. 返回显示设备的水平方向最大分辨率（总宽度像素值）。
3. 例如：显示器分辨率为 1920×1080 时，screen.width 值为 1920。
4. height:
5. 返回显示设备的垂直方向最大分辨率（总高度像素值）。
6. 同上例中，screen.height 值为 1080。
7. availHeight: 如果用户设置了自动隐藏任务栏，值会与height的值相同
8. 表示显示器上浏览器/应用可以实际使用的垂直空间（排除了操作系统界面占用的区域），比如任务栏
9. 减去40px任务栏，screen.availHeight值为1040
10. availWidth:
11. 表示用户屏幕的可用宽度（单位：像素）。它与 screen.width 的关系类似于 availHeight 与 height 的关系。
12. 减去垂直任务栏（40px）,screen.availWidth值为1880
13. availLeft:
14. 表示屏幕可用工作区的左侧起始位置（单位：像素）它定义了操作系统界面（如任务栏或 Dock）未占用的区域从屏幕左边缘开始的偏移量。
15. 当操作系统界面占据屏幕左侧时（如 macOS 左侧停靠的 Dock 或 Windows 垂直任务栏），availLeft 表示可用工作区开始的 X 坐标
16. avilTop: 请参考availLeft

详细的兼容性等内容请参考:屏幕 - Web API |MDN

window对象的窗口属性

**更多详细的介绍请看:**developer.mozilla.org/zh-CN/docs/…

1. screenX: 窗口左边界到屏幕左边缘的距离 （单位：CSS 像素）

2. screenY: 窗口上边界到屏幕顶部的距离 （单位：CSS 像素）

3. outerHeight:整个浏览器窗口的外部高度, （单位：CSS 像素）全屏时 ≈ screen.height

4. outerWidth:整个浏览器窗口的外部宽度, （单位：CSS 像素）全屏时 ≈ screen.width

5. innerHeight: 浏览器视口(viewport)的高度，（单位：CSS 像素）包括：

• 当前显示的页面内容区域

• 水平滚动条（如果可见）

• 不包含浏览器工具栏、地址栏或状态栏

6. innerWidth: 浏览器视口(viewport)的宽度（单位：CSS 像素），包括：

• 当前显示的页面内容区域
• 垂直滚动条（如果可见）
• 不包含浏览器侧边栏或开发者工具面板

属性	包含浏览器界面	包含滚动条	表示内容
outerHeight	✅	✅	整个窗口
outerWidth	✅	✅	整个窗口
innerHeight	❌	✅	可视内容区
innerWidth	❌	✅	可视内容区

鼠标事件坐标属性

在 JavaScript 鼠标事件（MouseEvent）中，screenX、screenY、x 和 y 是常用的坐标属性，它们表示事件发生时鼠标指针的不同位置：

更多详细的介绍请看: developer.mozilla.org/zh-CN/docs/…

1. event.screenX 和 event.screenY

含义：

• 全局屏幕坐标系中的位置
• 相对于**整个屏幕（所有显示器组合）**的左上角(0,0)

特点：

• 包含多显示器支持（值可为负数）
• 不受页面滚动或缩放影响
• 单位是设备物理像素

document.addEventListener('click', (e) => { console.log(屏幕位置: (${e.screenX}, ${e.screenY})); });

// 多显示器应用 if (e.screenX < 0) { console.log("点击发生在左侧扩展显示器"); }

使用场景:

document.addEventListener('click', (e) => {
 console.log(`屏幕位置: (${e.screenX}, ${e.screenY})`);
});

// 多显示器应用
if (e.screenX < 0) {
 console.log("点击发生在左侧扩展显示器");
}

2. event.x 和 event.y

含义：

• 视口坐标系中的位置（等同于 event.clientX 和 event.clientY)
• 相对于**浏览器可视区域（viewport）**的左上角(0,0)

特点：

• 包含滚动条区域
• 受页面缩放影响（CSS像素）
• 随页面滚动而变化
• event.x 是 event.clientX 的别名
• event.y 是 event.clientY 的别名

使用场景：

element.addEventListener('mousemove', (e) => {
 console.log(`视口内位置: (${e.x}, ${e.y})`);
 element.style.setProperty('--mouse-x', `${e.x}px`);
 element.style.setProperty('--mouse-y', `${e.y}px`);
});