js怎么获取屏幕分辨率-js教程-PHP中文网

js怎么获取屏幕分辨率

星降

发布： 2025-08-17 13:39:01

原创

546人浏览过

获取屏幕分辨率应使用window.screen.width和window.screen.height，它们返回显示器的物理像素尺寸；而浏览器视口尺寸则通过window.innerwidth/window.innerheight或document.documentelement.clientwidth/clientheight获取，表示当前窗口内可显示内容的区域大小；二者区别在于屏幕分辨率是固定硬件属性，视口尺寸随浏览器窗口调整变化；设备像素比（dpr）影响css像素与物理像素的映射关系，高dpr设备上一个css像素对应多个物理像素，需在图片加载和canvas绘制时进行适配；浏览器缩放会改变视口尺寸但不影响屏幕分辨率，多显示器环境下screen对象通常仅反映主屏信息，全屏模式下视口尺寸会与屏幕分辨率一致，旧版ie需用document对象属性替代innerwidth/height以确保兼容性。

js怎么获取屏幕分辨率

在JavaScript里，获取屏幕分辨率主要通过

window.screen

登录后复制

对象来完成，它能直接告诉你用户显示器的物理像素尺寸。

解决方案

如果你想知道用户整个屏幕的宽度和高度，最直接的方式就是使用

window.screen.width

登录后复制

和

window.screen.height

登录后复制

。这两个属性会返回屏幕的物理像素尺寸，而不是浏览器窗口的大小。

举个例子，如果你的显示器是1920x1080的，那么

screen.width

登录后复制

就是1920，

screen.height

登录后复制

就是1080。这听起来很简单，但实际应用中，很多时候我们需要的并不是这个“屏幕分辨率”，而是浏览器窗口内部的可用空间，或者说，用户实际能看到内容的区域。

// 获取屏幕分辨率
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
console.log(`屏幕分辨率: ${screenWidth}x${screenHeight}`);

// 获取浏览器视口尺寸（不含滚动条、工具栏等）
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`浏览器视口: ${viewportWidth}x${viewportHeight}`);

// 获取文档元素（HTML）的尺寸，通常等同于视口，但更稳定
const documentWidth = document.documentElement.clientWidth;
const documentHeight = document.documentElement.clientHeight;
console.log(`文档区域: ${documentWidth}x${documentHeight}`);

登录后复制

屏幕分辨率与浏览器视口尺寸有何不同？

这是一个非常常见的误解，我发现很多开发者在刚接触前端布局时都会把它们混淆。简单来说，屏幕分辨率是你的显示器能显示的最大像素点数量，它是个固定值，除非你换显示器或者改变操作系统的显示设置。而浏览器视口尺寸，也就是

window.innerWidth

登录后复制

和

window.innerHeight

登录后复制

，则是当前浏览器窗口内部，不包含浏览器边框、工具栏、滚动条等“杂物”的可视区域大小。

想象一下，你有一张很大的画布（屏幕），而你的浏览器只是这张画布上的一扇窗户。

screen.width/height

登录后复制

告诉你画布有多大，而

window.innerWidth/innerHeight

登录后复制

则告诉你这扇窗户有多大。这扇窗户是可以随意调整大小的，你拖动浏览器边框，它的值就会跟着变。

此外，还有一个

document.documentElement.clientWidth

登录后复制

和

document.documentElement.clientHeight

登录后复制

，它们通常与

window.innerWidth/innerHeight

登录后复制

返回相同的值，但在某些旧浏览器或特定场景下，

document.documentElement

登录后复制

可能提供更稳定的尺寸，特别是当你需要获取不包含滚动条的精确内容区域时。所以，在做响应式布局或者需要精确计算页面元素位置时，我们更多地关注的是后面两个视口尺寸，而非屏幕分辨率。毕竟，你的网页内容是呈现在浏览器窗口里的，不是直接铺满整个屏幕的。

设备像素比（DPR）如何影响分辨率报告？

这块内容就有点意思了，尤其是对于高DPI（Retina）屏幕来说，它会引入一个“设备像素”和“CSS像素”的概念。

window.devicePixelRatio

登录后复制

就是这个桥梁。它表示的是物理像素和CSS像素之间的比率。比如，在iPhone上，

devicePixelRatio

登录后复制

可能是2或3，这意味着一个CSS像素实际上由2x2或3x3的物理像素点来渲染。

那么，这和分辨率有什么关系呢？

window.screen.width

登录后复制

和

window.screen.height

登录后复制

返回的是设备的物理像素尺寸。但当你在CSS里写

width: 100px;

登录后复制

时，这个100px是CSS像素。在高DPR设备上，100个CSS像素可能对应着200或300个物理像素。这就导致了一个现象：你的屏幕物理分辨率很高（比如MacBook Pro），但

window.innerWidth

登录后复制

可能只显示一个相对较小的值（比如1440px），因为浏览器默认会根据DPR进行缩放，让网页内容看起来更舒适，而不是密密麻麻的。

理解DPR非常重要，因为它影响了图片资源的加载策略（比如

srcset

登录后复制

），以及canvas绘图的清晰度。如果你直接在canvas上画100x100的矩形，在高DPR屏幕上它可能会显得模糊，因为你没有考虑到物理像素的密度。这时候，你需要将canvas的内部尺寸乘以DPR，再用CSS将其缩放回来，才能获得清晰的渲染效果。这不仅仅是获取分辨率那么简单，它关乎到用户实际的视觉体验。