JS 获取屏幕分辨率：window.screen.width 与 height 用法

在前端开发中，获取用户显示设备的屏幕分辨率最直接的 API 是 window.screen.width 与 window.screen.height。这两个只读属性返回的是当前显示设备在系统缩放影响下的 CSS 逻辑像素大小，而非厂商标注的硬件物理像素。本文将详细讲解其标准语法、物理真实分辨率的换算方法、与浏览器视口（Viewport）及工作区（availWidth/Height）的严格区别，并给出针对不同业务场景的实用选型建议。

一、基础用法：读取 window.screen.width 与 height

Screen 对象是 window 全局对象的属性之一，用于提供当前运行环境所在显示设备的规格信息。在全局作用域下，可以省略 window. 前缀，直接使用 screen.width 与 screen.height。

// 1. 直接获取屏幕的宽度和高度（单位：CSS 像素）
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

console.log(`屏幕逻辑分辨率: ${screenWidth} x ${screenHeight}`);
// 示例输出（标准 1080P 未缩放显示器）：屏幕逻辑分辨率: 1920 x 1080

使用时需要明确以下三个基本事实：

• 只读属性：无法通过代码给 screen.width = 1000 赋值来修改屏幕尺寸。任何赋值操作在严格模式下会抛出错误，非严格模式下会被静默忽略。
• 包含全部屏幕范围：它代表整个物理显示区域的总大小，包含操作系统的任务栏（Windows Taskbar）、顶部菜单栏或程序坞（macOS Dock）。
• 单位是 CSS 像素：它并不是显示面板上的物理发光二极管点阵数量。如果操作系统开启了 125%、150% 或 200% 的高 DPI 显示缩放，此值会被相应等比除小。

二、核心概念对比：屏幕、可用工作区与浏览器视口

前端开发者最容易混淆的概念是将“屏幕分辨率”与“浏览器视口宽度”等同看待。实际上，从最外层的硬件显示器到网页代码执行的最内层渲染区域，存在清晰的四层嵌套结构：

1. 屏幕总区域（Screen）：screen.width 与 screen.height，对应整块物理屏幕。
2. 可用工作区（Available Screen）：screen.availWidth 与 screen.availHeight，即排除了操作系统常驻界面（任务栏、Dock、菜单栏）后的桌面可用面积。
3. 浏览器应用外框（Outer Window）：window.outerWidth 与 window.outerHeight，包含浏览器自身的标签页栏、地址栏、书签栏及窗体边框。
4. 网页渲染视口（Inner Viewport）：window.innerWidth 与 window.innerHeight，网页 DOM 真正排版渲染的可视区域（包含出现时的滚动条）。

三、物理硬件分辨率换算：引入 window.devicePixelRatio

很多开发者在 4K 超高清显示器（物理 3840×2160）或 MacBook Retina 屏上运行 screen.width 时，会发现返回值只有 1920、1440 或 1680。

这是因为操作系统为了防止在高分屏下文字与按钮变得极小，开启了显示缩放（HiDPI）。在浏览器中，1 个 CSS 像素对应多个物理硬件像素。此时需要借助 window.devicePixelRatio（设备像素比，简称 DPR）完成换算：

通过以下标准代码，可以一次性获取逻辑分辨率与推导出的硬件物理分辨率：

// 获取显示设备的完整分辨率信息
function getScreenResolutionDetails() {
  const dpr = window.devicePixelRatio || 1;
  
  // 1. CSS 逻辑分辨率
  const logicalWidth = screen.width;
  const logicalHeight = screen.height;
  
  // 2. 计算物理硬件分辨率
  const physicalWidth = Math.round(logicalWidth * dpr);
  const physicalHeight = Math.round(logicalHeight * dpr);

  return {
    dpr,
    logical: { width: logicalWidth, height: logicalHeight },
    physical: { width: physicalWidth, height: physicalHeight }
  };
}

const res = getScreenResolutionDetails();
console.log(`DPR: ${res.dpr}`);
console.log(`逻辑像素: ${res.logical.width} x ${res.logical.height}`);
console.log(`物理硬件: ${res.physical.width} x ${res.physical.height}`);

四、常用尺寸属性全景对比与封装

为了避免在开发中误选属性，以下汇总了前端常用的四个尺寸维度的关键差异：

在日常业务开发中，建议封装统一的环境检测方法，避免散落在各处的重复调用：

/**
 * 获取客户端完整的显示环境指标
 */
function getClientDisplayProfile() {
  const dpr = window.devicePixelRatio || 1;

  return {
    // 1. 物理屏幕全域 (CSS 像素)
    screen: {
      width: screen.width,
      height: screen.height
    },
    // 2. 系统工作区 (剔除任务栏)
    availScreen: {
      width: screen.availWidth,
      height: screen.availHeight
    },
    // 3. 浏览器外壳尺寸
    windowOuter: {
      width: window.outerWidth,
      height: window.outerHeight
    },
    // 4. 网页渲染视口 (布局核心)
    viewport: {
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight,
      clientWidth: document.documentElement.clientWidth,
      clientHeight: document.documentElement.clientHeight
    },
    // 5. 高分屏物理像素推算
    physicalScreen: {
      width: Math.round(screen.width * dpr),
      height: Math.round(screen.height * dpr)
    },
    dpr
  };
}

五、业务场景实战与选型决策

场景一：弹出独立子窗口并在屏幕中央居中

当使用 window.open 打开支付确认窗口或第三方授权登录页面时，通常希望弹窗处于屏幕中央。此时如果使用 screen.width 计算，由于没有排除底部的系统任务栏，窗口视觉上会偏下。应当使用 screen.availWidth 与 screen.availHeight：

// 居中打开一个指定宽高的独立弹出窗口
function openCenteredPopup(url, title, w, h) {
  // 基于系统可用工作区计算中心点左上角偏移
  const left = (screen.availWidth - w) / 2;
  const top = (screen.availHeight - h) / 2;

  return window.open(
    url,
    title,
    `width=${w},height=${h},top=${top},left=${left},resizable=yes,scrollbars=yes`
  );
}

// 示例：在屏幕中央弹出 600x450 的授权框
openCenteredPopup('/auth/login', 'OAuthLogin', 600, 450);

场景二：防范误区——切勿用 screen.width 制作网页响应式布局

六、多显示器与移动端注意事项

1. 多显示器环境的取值： 当用户连接了双显示器甚至三显示器时，window.screen.width 和 height 始终只返回当前浏览器窗口所在的那一台显示器的尺寸。如果用户将窗口从 4K 屏拖动到旁边的 1080P 屏上，下一次读取 screen.width 时，其值会自动变为 1080P 显示器的对应规格。
2. 移动端屏幕方向变化： 在智能手机或平板设备上，横竖屏切换时，screen.width 与 screen.height 的数值会互换（例如竖屏为 390×844，横屏时为 844×390）。若要监听屏幕方向变化，推荐配合 window.screen.orientation 事件：

   // 监听移动端屏幕翻转
   if (screen.orientation) {
     screen.orientation.addEventListener('change', () => {
       console.log(`当前方向: ${screen.orientation.type}`);
       console.log(`新分辨率: ${screen.width} x ${screen.height}`);
     });
   }

3. 隐私模式与指纹防范： 在某些高隐私保护浏览器（如 Tor Browser）或开启了抗指纹跟踪特性的浏览器配置下，screen.width 与 screen.height 可能会被故意返回伪装值（例如强制四舍五入到整百像素，或直接返回与当前浏览器窗口大小相同的值），以防止网站通过屏幕硬件特征追踪用户。在开发安全敏感或统计类应用时，需具备对该特性的容错能力。