最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Detect window resolution on Mac and Surface - Stack Overflow

programmeradmin3浏览0评论

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
Add a ment  | 

8 Answers 8

Reset to default 4

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./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.

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>
发布评论

评论列表(0)

  1. 暂无评论