screen.width和screen.height获取屏幕物理分辨率，受系统缩放影响；2. window.innerwidth和window.innerheight获取浏览器内容区尺寸，随窗口缩放变化；3. 移动端应结合window.devicepixelratio计算物理像素尺寸；4. 显示缩放、浏览器缩放、多显示器和虚拟化环境可能导致获取值与实际不符，需根据场景选择合适属性并综合判断以准确获取屏幕尺寸。
获取JS中的屏幕尺寸，简单来说，就是利用
window对象的一些属性。但具体怎么用，以及不同场景下的选择，还是有点讲究的。
解决方案：
使用
window.screen、
window.innerWidth、
window.innerHeight等属性来获取屏幕尺寸。
window.screen提供的是屏幕的物理尺寸，而
window.innerWidth和
window.innerHeight提供的是浏览器窗口的尺寸（不包括工具栏和滚动条）。
如何区分screen.width/height 和 window.innerWidth/innerHeight？
这是个很常见的问题。
screen.width和
screen.height代表的是用户屏幕的实际分辨率，比如说你的显示器是1920x1080，那这两个值基本上就是这个数。但要注意，如果用户设置了缩放（比如Windows系统里的显示缩放），这个值可能不会完全等于硬件分辨率。
而
window.innerWidth和
window.innerHeight，则是浏览器窗口内部的尺寸。如果你把浏览器窗口缩小，这两个值也会相应变小。它们不包括浏览器的边框、工具栏、滚动条等。所以，如果你想知道网页实际可以利用的显示区域大小，用这两个属性更准确。
举个例子：
console.log("屏幕宽度 (screen.width):", window.screen.width);
console.log("屏幕高度 (screen.height):", window.screen.height);
console.log("窗口内部宽度 (window.innerWidth):", window.innerWidth);
console.log("窗口内部高度 (window.innerHeight):", window.innerHeight);移动端设备上，如何更精确地获取屏幕尺寸？
移动端的情况稍微复杂一些。因为涉及到viewport的概念，以及不同设备的像素密度（devicePixelRatio）。
多个微信小程序源码合集
下载
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加
单纯使用
screen.width和
screen.height，可能得到的是“设备独立像素”（device-independent pixels, DIPs），而不是实际的物理像素。为了获取更精确的物理像素尺寸，可以结合
window.devicePixelRatio来计算。
例如：
const screenWidth = window.screen.width * window.devicePixelRatio;
const screenHeight = window.screen.height * window.devicePixelRatio;
console.log("物理屏幕宽度:", screenWidth);
console.log("物理屏幕高度:", screenHeight);window.devicePixelRatio表示物理像素和设备独立像素的比率。例如，如果
devicePixelRatio是2，那么表示1个DIP对应2个物理像素。
另外，移动端还有个
window.outerWidth和
window.outerHeight，这两个属性会包含浏览器的边框和工具栏。但一般情况下，我们更关心的是网页内容区域的尺寸，所以
innerWidth和
innerHeight更常用。
为什么获取到的屏幕尺寸与实际不符？
有时候你会发现，通过JS获取到的屏幕尺寸和实际的屏幕分辨率不一致。这可能有几个原因：
-
显示缩放： 操作系统层面设置了显示缩放。比如Windows系统里，你可以设置125%的缩放比例，这会导致
screen.width
和screen.height
返回的值小于实际分辨率。 -
浏览器缩放： 用户可能在浏览器里进行了缩放操作（Ctrl + +/-）。这会影响
window.innerWidth
和window.innerHeight
的值。 -
多显示器： 如果你的电脑连接了多个显示器，
screen.width
和screen.height
可能会返回主显示器的尺寸，或者所有显示器合并后的尺寸。具体行为取决于操作系统和浏览器的实现。 - 虚拟化环境： 在虚拟机或者远程桌面环境中，获取到的屏幕尺寸可能是虚拟机的配置，而不是宿主机的实际屏幕尺寸。
所以，在处理屏幕尺寸时，要考虑到这些因素，并根据实际需求选择合适的属性。如果需要非常精确的物理像素尺寸，可能需要结合CSS媒体查询，或者服务器端的信息来辅助判断。
