获取屏幕分辨率应使用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
。这两个属性会返回屏幕的物理像素尺寸，而不是浏览器窗口的大小。
举个例子，如果你的显示器是1920×1080的，那么
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像素实际上由2×2或3×3的物理像素点来渲染。
那么，这和分辨率有什么关系呢？
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上画100×100的矩形，在高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怎么获取屏幕分辨率的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515742.html
微信扫一扫 
支付宝扫一扫 
