I'm working on a photo carousel. The intent is to display x pictures on one row where x is dependent on the viewport size. By viewport I mean the area inside the browser's window less scroll bars. The photos are re-sized to a width of 200 If the viewport width is 2000 I can get 10 photos (200*10=2000) (I kept the arithmetic easy)

My screen resolution is 3840x2160. I expanded the browser to take up the entire screen. When I use: $(window).width() i e up with 1707 and with screen.width I e up with 1707. Definitely not 3840.

When I resize the browser so that it's taking up about half the screen I get: $(window).width() of 929 and with screen.width 1706.

For browsers I'm using Edge, IE11, FF and Chrome 46 and I get roughly the same problem.

My desktop monitor is also 4k and from what I've read it consists of two panels of 1920x1080 for a total of 3840x2160. If that's true, on my laptop 4k monitor I should be getting a width of 1920 using screen.width, if I take up the entire screen but I'm not.

I need to take into account that most folks viewing this website will not have 4k monitors.

Any ideas on how I can get the screen width on a 4k monitor?

I'm working on a photo carousel. The intent is to display x pictures on one row where x is dependent on the viewport size. By viewport I mean the area inside the browser's window less scroll bars. The photos are re-sized to a width of 200 If the viewport width is 2000 I can get 10 photos (200*10=2000) (I kept the arithmetic easy)

My screen resolution is 3840x2160. I expanded the browser to take up the entire screen. When I use: $(window).width() i e up with 1707 and with screen.width I e up with 1707. Definitely not 3840.

When I resize the browser so that it's taking up about half the screen I get: $(window).width() of 929 and with screen.width 1706.

For browsers I'm using Edge, IE11, FF and Chrome 46 and I get roughly the same problem.

My desktop monitor is also 4k and from what I've read it consists of two panels of 1920x1080 for a total of 3840x2160. If that's true, on my laptop 4k monitor I should be getting a width of 1920 using screen.width, if I take up the entire screen but I'm not.

I need to take into account that most folks viewing this website will not have 4k monitors.

Any ideas on how I can get the screen width on a 4k monitor?

• javascript
• width
• screen
• monitor

4 Answers 4

Perhaps you can make use of the window.devicePixelRatio property.

It should give you 1, 2, etc. Multiply window.innerWidth and window.innerHeight by this value.

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

On my Dell laptop with a 4K UHD screen (3840 * 2160) display resolution, with Windows display settings configured to have a 250% scale and layout, I get the following results:

MDN documentation: https://developer.mozilla/en-US/docs/Web/API/Window/devicePixelRatio

To get the windows' dimensions :

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

To get the screen's dimensions :

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

Javascript should report me for my 4K monitor the screen resolution 3840 x 2160. In fact, I get:

• 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 pixels is the Windows 10 Taskbar at the bottom of the desktop.

var dpi_x = document.getElementById('dpi').offsetWidth;
var dpi_y = document.getElementById('dpi').offsetHeight;
var width = screen.width / dpi_x;
var height = screen.height / dpi_y;

alert (width + ' x ' + height);

<div id="dpi" style="height: 1in; width: 1in; left: 100%; position: fixed; top: 100%;"></div>