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
代表的是用户屏幕的实际分辨率，比如说你的显示器是1920×1080，那这两个值基本上就是这个数。但要注意，如果用户设置了缩放（比如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）。
单纯使用
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媒体查询，或者服务器端的信息来辅助判断。
以上就是JS如何获取屏幕尺寸的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514538.html
微信扫一扫 
支付宝扫一扫 
