boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网!

文章导读

JS如何获取屏幕尺寸


avatar
站长 2025年8月12日 2

screen.width和screen.height获取屏幕物理分辨率,受系统缩放影响;2. window.innerwidth和window.innerheight获取浏览器内容区尺寸,随窗口缩放变化;3. 移动端应结合window.devicepixelratio计算物理像素尺寸;4. 显示缩放、浏览器缩放、多显示器和虚拟化环境可能导致获取值与实际不符,需根据场景选择合适属性并综合判断以准确获取屏幕尺寸。

JS如何获取屏幕尺寸

获取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获取到的屏幕尺寸和实际的屏幕分辨率不一致。这可能有几个原因:

  1. 显示缩放: 操作系统层面设置了显示缩放。比如Windows系统里,你可以设置125%的缩放比例,这会导致
    screen.width

    screen.height

    返回的值小于实际分辨率。

  2. 浏览器缩放: 用户可能在浏览器里进行了缩放操作(Ctrl + +/-)。这会影响
    window.innerWidth

    window.innerHeight

    的值。

  3. 多显示器: 如果你的电脑连接了多个显示器,
    screen.width

    screen.height

    可能会返回主显示器的尺寸,或者所有显示器合并后的尺寸。具体行为取决于操作系统和浏览器的实现。

  4. 虚拟化环境: 在虚拟机或者远程桌面环境中,获取到的屏幕尺寸可能是虚拟机的配置,而不是宿主机的实际屏幕尺寸。

所以,在处理屏幕尺寸时,要考虑到这些因素,并根据实际需求选择合适的属性。如果需要非常精确的物理像素尺寸,可能需要结合CSS媒体查询,或者服务器端的信息来辅助判断。



评论(已关闭)

评论已关闭