JavaScript Window Screen

Screen 对象描述的是用户"整块显示器"的信息：屏幕多宽多高、能用多少、颜色深度如何。它和 window.innerWidth 是两个概念——innerWidth 是浏览器窗口内的可视区，而 screen 是整个屏幕，不随浏览器窗口大小变化。做全屏游戏、居中弹窗、多显示器适配时会用到它。请在浏览器控制台运行以下代码。

screen 与 window 的区别

screen 归 window 管，写 window.screen 或直接 screen 都可以；它的尺寸是硬件级的：

console.log(screen === window.screen);  // 输出：true
console.log(screen.width);              // 输出：1920，屏幕总宽（像素）
console.log(screen.height);             // 输出：1080，屏幕总高
console.log(window.innerWidth);         // 输出：1920，浏览器可视区宽

把浏览器窗口拖小后再看：screen.width 不变，innerWidth 却跟着变小——这就是两者最大的差别。

可用区域：availWidth / availHeight

availWidth/availHeight 是"去掉任务栏等系统占用后"真正可用的区域：

console.log(screen.availWidth);   // 输出：1920（示例）
console.log(screen.availHeight);  // 输出：1040（示例，任务栏占掉 40）
console.log(screen.height - screen.availHeight);  // 输出：40（示例），被任务栏吃掉的高度

Windows 任务栏在底部时，availHeight 会比 height 小；判断"屏幕还有多少可用空间"就靠这两个属性。

颜色深度：colorDepth / pixelDepth

colorDepth 表示屏幕能显示多少种颜色，pixelDepth 是像素位深，现代浏览器两者通常相同：

console.log(screen.colorDepth);  // 输出：24，24 位即 1600 多万色
console.log(screen.pixelDepth);  // 输出：24
console.log(Math.pow(2, screen.colorDepth));  // 输出：16777216，可显示颜色总数

老式 8 位屏只有 256 色，前端可以根据 colorDepth 决定是否降级图片质量。

实战：让弹窗在屏幕正中央

结合 avail 尺寸与 window.open 的特性参数，可以把弹窗精确居中：

let w = 400, h = 300;
let left = (screen.availWidth - w) / 2;
let top = (screen.availHeight - h) / 2;
let win = window.open("about:blank", "_blank",
  "width=" + w + ",height=" + h +
  ",left=" + left + ",top=" + top);
win.document.write("<h2>居中的小窗</h2>");
// 效果：屏幕正中央弹出 400x300 的小窗口，标题"居中的小窗"

计算思路很简单：屏幕可用尺寸减去窗口尺寸，再除以 2 就是窗口左上角应放的位置。

小结：screen 描述整块显示器，width/height 是总尺寸、availWidth/availHeight 是扣除任务栏后的可用尺寸、colorDepth 表示颜色深度；它不随浏览器窗口变化，需要"整个屏幕"的坐标信息（如居中弹窗）时就找 screen。