JS获取屏幕分辨率的几种方法

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JS获取屏幕分辨率方法详解》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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

在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将其缩放回来，才能获得清晰的渲染效果。这不仅仅是获取分辨率那么简单，它关乎到用户实际的视觉体验。

浏览器兼容性与特殊情况有哪些需要注意？

虽然window.screen、window.innerWidth这些API在现代浏览器中已经非常稳定和通用了，但还是有一些特殊情况和历史遗留问题值得我们留意。

首先是浏览器缩放。用户在浏览器里按Ctrl/Cmd +或者-来缩放页面时，window.innerWidth和window.innerHeight的值会跟着变化，但window.screen.width和window.screen.height则保持不变。因为缩放改变的是CSS像素与设备独立像素之间的关系，而不是显示器的物理分辨率。如果你依赖innerWidth来判断用户屏幕大小，那么用户缩放后你的判断可能就不准确了。

其次是多显示器设置。当用户连接了多个显示器时，window.screen.width和window.screen.height通常会报告主显示器的分辨率。如果你想获取所有连接显示器的总分辨率，或者特定屏幕的信息，JavaScript原生API就显得力不从心了。这通常需要依赖更底层的操作系统API或者一些浏览器扩展才能做到。

再有就是全屏模式。当浏览器进入全屏模式时（比如播放视频），window.innerWidth和window.innerHeight通常会扩展到与window.screen.width和window.screen.height相同，因为此时浏览器窗口占据了整个屏幕。但退出全屏后它们又会恢复到原来的值。

最后，早期的IE浏览器（比如IE8及更早版本）可能对window.innerWidth和window.innerHeight的支持不那么完善，或者行为有所差异，通常需要使用document.documentElement.clientWidth和document.documentElement.clientHeight作为备选方案。不过，随着这些老旧浏览器市场份额的持续萎缩，这已经不再是前端开发的主流挑战了。但如果你在维护一些非常老的项目，这仍然是一个需要考虑的点。

本篇关于《JS获取屏幕分辨率的几种方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！