Detect window resolution on Mac and Surface

Question

On my Surface and MacBook, I’ve set my resolution as 2160x1440, but my code:

$(window).height(); //return 960
$(window).height(); //return 1440

I have tested it on Windows, and it worked properly. What’s the issue here?

Answer 1

This is because you are using a retina display.

You must use window.devicePixelRatio to calculate the real resolution.

edit : A lot of info about resolution and device pixel ratio at http://ryanve.com/lab/resolution/

Some important notes :

• devicePixelRatio definition differs by platform.
• window.devicePixelRatio is equivalent to dppx
• window.devicePixelRatio changes with zoom on desktops yet remains static on mobile devices. device-pixel-ratio media queries also differ as so.

Answer 2

try window.devicePixelRatio

window.screen.width * window.devicePixelRatio; //Screen Width
window.screen.height * window.devicePixelRatio; //Screen  Height

Answer 3

To check your viewport height use window.innerHeight or window.outerHeight. If you want to check your screen resolution, simply use window.screen.height. Pure JavaScript, no jQuery required.

Remember, that logical pixels aren't the same as physical pixels, especially at Mac's Retina display.

Answer 4

Kevin is actually right about the pixel ratio, but the solution he posted isn't cross-browser friendly. This is actually a slightly modified version of Adam's answer here, but this should support more browsers. It uses media queries to determine what the pixel ratio is, but keep in mind that if you set an element to be that size, it will actually show up huge on a Retina or other high-density display.

var multiplier = 1;

if ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3)) {
    multiplier = 2;
}

var width = $(window).width() * multiplier;
var height = $(window).height() * multiplier;

Answer 5

I'am using this:

  var screenResolution = window.screen.width + "x" + window.screen.height;
  var viewportSize = getViewport();

  var getViewport = function(a) {
             var c = document.documentElement,  e = document.body, g = e && e.clientWidth && e.clientHeight,  ca = [];
             c && c.clientWidth && c.clientHeight && ("CSS1Compat" === document.compatMode || !g) ? ca = [c.clientWidth, c.clientHeight] : g && (ca = [e.clientWidth, e.clientHeight]);
             c = 0 >= ca[0] || 0 >= ca[1] ? "" : ca.join("x");
             return c;
        }

Answer 6

This is untested, but you should be able to do something like this:

actual_resolution = $(window).height() * $(window).devicePixelRatio;

Answer 7

With the devicePixelRatio you must get the correct resolution.

var devicePixelRatio = window.devicePixelRatio || 1;

console.log(window.screen.width * devicePixelRatio); // Width
console.log(window.screen.height * devicePixelRatio); // Height

Answer 8

This was my attempt at a cross-browser/platform dpi solution. It uses a 1 inch fixed width/height cell to determine the number of pixels in it.

<script> 
function dpi(){ 
   var res={},div=document.createElement("div");
   div.style.position="absolute";
   div.style.width="1in";
   div.style.height="1in";
   div.style.left="-100%";
   div.style.top="-100%";
   document.getElementsByTagName('body')[0].appendChild(div);
   res["xdpi"]=div.offsetWidth;
   res["ydpi"]=div.offsetHeight; 
   div="";
   return res; 
} 
res=dpi();
alert("xdpi="+res.xdpi+", ydpi="+res.ydpi) 
</script>