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?
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?
Share Improve this question edited Aug 20, 2014 at 19:10 Ry-♦ 225k56 gold badges492 silver badges498 bronze badges asked Aug 12, 2014 at 7:36 HDTHDT 2,04720 silver badges32 bronze badges 2- Are you using a Retinadisplay? – Joakim M Commented Aug 18, 2014 at 10:38
- how about $(document).height(); ? – Thomas Sebastian Commented Aug 18, 2014 at 11:42
8 Answers
Reset to default 4This 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./lab/resolution/
Some important notes :
- devicePixelRatio definition differs by platform.
window.devicePixelRatio
is equivalent to dppxwindow.devicePixelRatio
changes with zoom on desktops yet remains static on mobile devices. device-pixel-ratio media queries also differ as so.
try window.devicePixelRatio
window.screen.width * window.devicePixelRatio; //Screen Width
window.screen.height * window.devicePixelRatio; //Screen Height
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.
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;
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.patMode || !g) ? ca = [c.clientWidth, c.clientHeight] : g && (ca = [e.clientWidth, e.clientHeight]);
c = 0 >= ca[0] || 0 >= ca[1] ? "" : ca.join("x");
return c;
}
This is untested, but you should be able to do something like this:
actual_resolution = $(window).height() * $(window).devicePixelRatio;
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
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>