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

Question

我在做一个照片传送带。其目的是在一行上显示x张图片，其中x取决于视口大小。我所说的视区指的是浏览器窗口内没有滚动条的区域。如果视口宽度为2000，我可以获得10张照片(200*10=2000) (我保持算法简单)，则照片的大小调整为200

我的屏幕分辨率是3840x2160。我将浏览器扩展到占据整个屏幕。当我使用：$(window).width()时，我得到1707，使用screen.width时，我得到1707。当然不是3840。

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

对于浏览器，我使用Edge，IE11，FF和Chrome46，我得到了大致相同的问题。

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

我需要考虑到大多数浏览这个网站的人不会有4k显示器。

关于如何在4k显示器上获得屏幕宽度，你有什么想法吗？

Answer 1

要获取窗的尺寸，请执行以下操作：

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

要获取屏幕尺寸，请执行以下操作：

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

Answer 2

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

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

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

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

​

​

​

​

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

​

​

Answer 3

对于屏幕分辨率为3840 x 2160的4K显示器，Javascript应该会报告我。事实上，我得到了：

• 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任务栏。