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

Question

我正在拍照片旋转木马。目的是在一行上显示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显示器上获得屏幕宽度的任何想法？

Answer 1

获取窗户的尺寸：

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

获取屏幕尺寸：

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

Answer 2

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

Answer 3

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

它应该给您1，2等。将window.innerWidth和window.innerHeight乘以该值。

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

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

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