Getting display resolution through Javascript or jQuery

Question

I was using javascript to obtain the my display resolution. The following code gave me the result of 1440 x 900 for my Macbook Pro

var screenWidth = screen.width;
var screenHeight = screen.height;

However, when I go check display setting of my Mac. It shows 2880 x 1800. I'm wondering if I was on the wrong track on getting the resolution of a display?

Daniel A. White · Accepted Answer · 2017-03-10 00:50:19Z

5

You have a Retina display. You can use devicePixelRatio to determine what the physical display size is.

var physicalScreenWidth = screen.width * window.devicePixelRatio;
var physicalScreenHeight = screen.height * window.devicePixelRatio;

In your example, devicePixelRatio will be 2

answered Mar 10, 2017 at 0:50

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

weijie lin Over a year ago

It works great for me. But just have a question, is that gonna work on all devices through different browsers?

Daniel A. White Over a year ago

developer.mozilla.org/en-US/docs/Web/API/Window/…

José Manuel Over a year ago

This does not work on Chrome if you have the page zoomed in or out, with Ctrl+ or Ctrl-

Collectives™ on Stack Overflow

Getting display resolution through Javascript or jQuery

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related