JavaScript 中 BOM 怎么使用 screen 获取显示器的分辨率信息-js教程-PHP中文网

javascript 中 screen 对象提供显示器分辨率信息：screen.width/screen.height 返回设备总像素尺寸，screen.availwidth/screen.availheight 返回扣除系统 ui 后的可用区域，screen.orientation 支持屏幕方向监听，适用于响应式布局。

javascript 中 bom 怎么使用 screen 获取显示器的分辨率信息

JavaScript 中通过 screen 对象可以轻松获取用户显示器的分辨率信息，它属于浏览器对象模型（BOM）的一部分，无需额外权限或 API 调用，直接访问即可。

screen.width 和 screen.height 获取屏幕总尺寸

这两个属性返回的是设备物理屏幕的**总宽度和高度（单位：像素）**，不随浏览器窗口缩放或滚动变化，反映的是显示器原始分辨率。

screen.width：水平方向像素数，例如 1920（常见 Full HD 屏幕）
screen.height：垂直方向像素数，例如 1080
注意：在高 DPI 设备（如 MacBook Retina 屏）上，该值仍是逻辑像素（CSS 像素），不是物理像素；如需物理像素，需结合 window.devicePixelRatio 计算

screen.availWidth 和 screen.availHeight 获取可用工作区

这两个属性返回的是**除去操作系统任务栏、Dock 栏等系统 UI 后，浏览器可实际使用的屏幕区域尺寸**，通常略小于 width/height。

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

Windows 上可能比 screen.width 少几十像素（因任务栏占用）
macOS 上 Dock 默认隐藏时可能与 screen.width 相同，显示时会减少
适合用于全屏布局或弹窗定位，避免被系统 UI 遮挡

screen.orientation 获取屏幕方向（现代浏览器支持）

screen.orientation 是一个 ScreenOrientation 对象，提供当前屏幕朝向信息，对响应式设计和横竖屏适配很有用。

screen.orientation.type 返回字符串，如 "landscape-primary"、"portrait-secondary"
screen.orientation.angle 返回旋转角度（0、90、180、270）
可通过 screen.orientation.addEventListener('change', ...) 监听方向变化
注意：部分旧版浏览器（如 IE）不支持，使用前建议做兼容性判断

实际使用示例

下面是一段简洁可靠的获取方式：

console.log('总宽度:', screen.width);           // 1920
console.log('总高度:', screen.height);          // 1080
console.log('可用宽度:', screen.availWidth);    // 1920 或 1890（取决于任务栏）
console.log('可用高度:', screen.availHeight);   // 1040
console.log('方向类型:', screen.orientation?.type); // "landscape-primary"

不复杂但容易忽略：这些值在页面生命周期内一般不变，除非用户切换显示器或旋转设备，因此通常只需初始化时读取一次。