Screen对象是BOM中用于获取用户显示器原始分辨率（物理像素尺寸）的只读对象，通过screen.width和screen.height可直接获取屏幕总宽高（如1920×1080），其值与缩放、窗口大小无关，但多屏下仅返回主显示器参数，且受隐私设置影响可能被四舍五入。

JavaScript 中可以通过 screen 对象获取用户显示器的原始分辨率（即物理像素尺寸），它属于 BOM（Browser Object Model）的一部分，无需额外引入，直接在浏览器环境中可用。

screen.width 和 screen.height 获取屏幕宽高

这两个属性返回的是设备屏幕的**总宽度和高度（单位：像素）**，反映的是显示器的原生分辨率，与网页缩放、浏览器窗口大小无关。

• screen.width：返回屏幕水平方向的像素数（如 1920）
• screen.height：返回屏幕垂直方向的像素数（如 1080）

示例：

console.log(`屏幕分辨率：${screen.width} × ${screen.height}`);
// 输出类似：屏幕分辨率：1920 × 1080

注意区分：screen vs window vs document

容易混淆的几个对象属性：

立即学习“Java免费学习笔记（深入）”；

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• screen.availWidth / availHeight：扣除操作系统任务栏、Dock 等保留区域后的**可用屏幕尺寸**（通常略小）
• window.innerWidth / innerHeight：当前浏览器窗口的**可视区域尺寸**（含滚动条，随窗口缩放/拖动实时变化）
• document.documentElement.clientWidth / clientHeight：页面内容区宽度/高度（不含滚动条，受 CSS 影响）

若目标是“显示器本身多大”，只用 screen.width 和 screen.height 即可。

响应式适配中慎用 screen 分辨率

虽然 screen 提供了原始分辨率，但现代网页适配更应依赖：

• CSS 媒体查询（@media (min-width: 768px)）
• window.matchMedia() 动态监听断点变化
• 避免用 screen.width 判断“是否为手机”——高 DPI 设备（如 MacBook Pro 或安卓旗舰）可能返回 2560×1600，但实际逻辑像素仍接近 1280×800

真正需要原始分辨率的场景较少，常见于全屏工具、广告投放设备类型识别、或调试显示适配问题。

兼容性与注意事项

screen 对象在所有主流浏览器中均被支持（包括 IE6+），但需注意：

• 在 iframe 中调用时，仍返回顶层窗口所在设备的屏幕信息
• 多显示器环境下，返回的是**主显示器**的分辨率（无法通过标准 API 获取副屏参数）
• 部分隐私增强型浏览器（如 Firefox 启用 privacy.resistFingerprinting）可能返回四舍五入后的值（如固定为 1920×1080），以防止指纹追踪