JavaScript 怎么获取屏幕的分辨率和可用宽高-js教程-PHP中文网

javascript中获取屏幕分辨率用screen.width/height（受缩放影响，需结合devicepixelratio得物理像素），窗口可视区域推荐innerwidth/innerheight，页面总尺寸用document.documentelement.scrollwidth/height， resize事件可监听变化。

javascript 怎么获取屏幕的分辨率和可用宽高

JavaScript 获取屏幕分辨率和可用宽高，主要靠 window.screen 和 window 对象的几个属性，但要注意它们代表的含义完全不同，别混用。

屏幕物理分辨率（设备像素）

指设备屏幕真实的像素数量，通常由 screen.width 和 screen.height 提供：

screen.width：屏幕水平方向总像素（如 1920）
screen.height：屏幕垂直方向总像素（如 1080）

⚠️ 注意：这个值受系统缩放（如 Windows 的 125% 缩放、macOS 的 HiDPI）影响。在高 DPI 屏幕上，它可能返回的是逻辑像素（CSS 像素），不是真实物理像素。想获取真实设备像素，需结合 window.devicePixelRatio 计算：

实际物理宽度 = screen.width × devicePixelRatio

浏览器窗口可视区域尺寸（常用）

网页开发中更常需要的是当前浏览器窗口的可用宽高（即用户能看到内容的区域），推荐用以下属性：

Alibabacloud Sdk Client Initialization For Java

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

下载

window.innerWidth：视口宽度（含滚动条，单位：CSS 像素）
window.innerHeight：视口高度（含滚动条，单位：CSS 像素）
document.documentElement.clientWidth：内容区宽度（不含滚动条）
document.documentElement.clientHeight：内容区高度（不含滚动条）

✅ 推荐优先使用 innerWidth / innerHeight，它们响应式强，支持 resize 监听，且包含滚动条占位（更贴近用户实际可见范围）。

页面整体尺寸（含滚动部分）

如果要获取整个页面的渲染尺寸（比如做全屏截图或滚动到底部判断），可用：

document.body.scrollWidth：页面总宽度（含溢出）
document.body.scrollHeight：页面总高度（含溢出）
document.documentElement.scrollWidth 和 scrollHeight 更健壮（兼容无 doctype 情况）

监听尺寸变化

屏幕旋转、窗口缩放或浏览器大小调整时，需动态响应：

window.addEventListener('resize', () => {
  console.log('视口宽高：', window.innerWidth, '×', window.innerHeight);
  console.log('屏幕分辨率：', screen.width, '×', screen.height);
});

注意：移动端旋转屏幕时，screen.width/height 可能互换，而 innerWidth/innerHeight 始终反映当前视口方向。