获取屏幕分辨率应使用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作为备选方案。不过，随着这些老旧浏览器市场份额的持续萎缩，这已经不再是前端开发的主流挑战了。但如果你在维护一些非常老的项目，这仍然是一个需要考虑的点。
