在 4k 显示器上使用 JS 查找屏幕大小

Posted 2023-03-06

【中文标题】在 4k 显示器上使用 JS 查找屏幕大小

【英文标题】：Finding the size of screen using JS on a 4k monitor

【发布时间】：2016-11-04 19:30:59

【问题描述】：

我正在制作照片轮播。目的是在一行上显示 x 个图片，其中 x 取决于视口大小。视口是指浏览器窗口内没有滚动条的区域。将照片重新调整为 200 的宽度如果视口宽度为 2000，我可以得到 10 张照片（200*10=2000）（我保持算术简单）

我的屏幕分辨率是 3840x2160。我扩展了浏览器以占据整个屏幕。当我使用： $(window).width() 我想出 1707 和 screen.width 我想出 1707。绝对不是 3840。

当我调整浏览器的大小使其占据大约一半的屏幕时，我得到： $(window).width() 为 929，screen.width 为 1706。

对于我使用 Edge、IE11、FF 和 Chrome 46 的浏览器，我遇到了大致相同的问题。

我的桌面显示器也是 4k，据我所知，它由两个 1920x1080 的面板组成，总共 3840x2160。如果这是真的，在我的笔记本电脑 4k 显示器上，我应该使用 screen.width 获得 1920 的宽度，如果我占据了整个屏幕但我没有。

我需要考虑到大多数浏览此网站的人都没有 4k 显示器。

关于如何在 4k 显示器上获得屏幕宽度的任何想法？

【参考方案1】：

也许您可以使用window.devicePixelRatio 属性。

它应该给你1、2等。将window.innerWidth和window.innerHeight乘以这个值。

var width = window.innerWidth * window.devicePixelRatio;
var height = window.innerHeight * window.devicePixelRatio;

在具有 4K UHD 屏幕 (3840 * 2160) 显示分辨率的戴尔笔记本电脑上，Windows 显示设置配置为具有 250% 的比例和布局，我得到以下结果：

MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

【参考方案2】：

获取窗户的尺寸：

var width = window.innerWidth;
var height = window.innerHeight;

获取屏幕尺寸：

var width = screen.width;
var height = screen.height;

【讨论】：

没有。正如我在帖子中提到的，screen.width 给了我 1707。使用 window.innerWidth 最大化浏览器窗口时，我也得到 1707。两者都是 1707。我假设尺寸以像素为单位。这是一台 4K 或 UHD 笔记本电脑。

那很奇怪...我会搜索问题的根源。

【参考方案3】：

javascript 应该报告我的 4K 显示器屏幕分辨率 3840 x 2160。事实上，我得到：

screen.width=2560 screen.height=1440 document.querySelector('html').clientWidth=2526 window.innerWidth=2526 window.outerWidth=2575 document.querySelector('html').clientHeight=1301 window.innerHeight=1301 window.outerHeight=1415 screen.availWidth=2560 screen.availHeight=1400

40 像素是桌面底部的 Windows 10 任务栏。