Screen
[TOC]
索引
属性：
- screen.width / screen.height：
number，屏幕的总宽度 / 高度（像素），包括系统任务栏等不可用区域。 - screen.availWidth / screen.availHeight：
number，屏幕的可用宽度 / 高度（像素），减去固定组件（如任务栏）。 - screen.colorDepth：
number，颜色深度（位数），表示屏幕支持的颜色数量（如 24 表示 16,777,216 色）。 - screen.pixelDepth：
number，像素深度（位数），通常与colorDepth相同。 - screen.orientation：
Object，屏幕方向信息（需通过window.screen.orientation访问，包含type和angle属性）。
Screen
属性
- screen.width / screen.height：
number，屏幕的总宽度 / 高度（像素），包括系统任务栏等不可用区域。 - screen.availWidth / screen.availHeight：
number，屏幕的可用宽度 / 高度（像素），减去固定组件（如任务栏）。 - screen.colorDepth：
number，颜色深度（位数），表示屏幕支持的颜色数量（如 24 表示 16,777,216 色）。 - screen.pixelDepth：
number，像素深度（位数），通常与colorDepth相同。 - screen.orientation：
Object，屏幕方向信息（需通过window.screen.orientation访问，包含type和angle属性）。
width
screen.width / screen.height：number，屏幕的总宽度 / 高度（像素），包括系统任务栏等不可用区域。
示例：获取屏幕分辨率
js
console.log("屏幕分辨率:", screen.width + "x" + screen.height);
// 输出示例: "屏幕分辨率: 1920x1080"availWidth
screen.availWidth / screen.availHeight：number，屏幕的可用宽度 / 高度（像素），减去固定组件（如任务栏）。
示例：检测可用显示区域
js
const availWidth = screen.availWidth;
const availHeight = screen.availHeight;
console.log(`可用区域: ${availWidth}x${availHeight}`);
// 输出示例: "可用区域: 1920x1040"（假设任务栏占用了40像素高度）pixelDepth
screen.pixelDepth：number，像素深度（位数），通常与 colorDepth 相同。
示例：适配高分辨率屏幕（Retina）
js
const isRetina = window.devicePixelRatio > 1;
if (isRetina) {
console.log("高分辨率屏幕，加载高清图片");
// 替换为 2x 或 3x 图片资源
}orientation
screen.orientation：Object，屏幕方向信息（需通过 window.screen.orientation 访问，包含 type 和 angle 属性）。
示例：检测屏幕方向
js
// 通过 window.screen.orientation 获取
const orientation = window.screen.orientation;
console.log("当前方向:", orientation.type); // "landscape-primary"（横屏）或 "portrait-primary"（竖屏）
console.log("旋转角度:", orientation.angle); // 0, 90, 180, 270