Question

在我的Surface和MacBook上，我将分辨率设置为2160x1440，但是我的代码：

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

我在Windows上测试过，它运行正常。这有什么问题？

Answer 1

这是因为您正在使用视网膜显示器。

您必须使用window.devicePixelRatio来计算真实分辨率。

编辑：有关http://ryanve.com/lab/resolution/

处的分辨率和设备像素比的大量信息

一些重要的注释：

devicePixelRatio定义因平台而异。
window.devicePixelRatio相当于dppx
window.devicePixelRatio随桌面放大而变化但在移动设备上保持静态。设备像素比媒体查询也有所不同。

Answer 2

要使用window.innerHeight或window.outerHeight检查您的视口高度。如果您想检查屏幕分辨率，只需使用window.screen.height即可。纯JavaScript，不需要jQuery。

请记住，逻辑像素与物理像素不同，尤其是在Mac的Retina显示屏上。

Answer 3

Kevin实际上对像素比率是正确的，但他发布的解决方案并不是跨浏览器友好的。这实际上是Adam的回答here的略微修改版本，但这应该支持更多的浏览器。它使用媒体查询来确定像素比率是多少，但请记住，如果将元素设置为该大小，它实际上会在Retina或其他高密度显示器上显示出来。

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 4

我正在使用它：

  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 5

这是未经测试的，但您应该能够做到这样的事情：

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

Answer 6

使用devicePixelRatio，您必须获得正确的解决方案。

var devicePixelRatio = window.devicePixelRatio || 1;

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

Answer 7

这是我在跨浏览器/平台dpi解决方案上的尝试。它使用1英寸固定宽度/高度单元格来确定其中的像素数。

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

Answer 8

尝试window.devicePixelRatio

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

检测Mac和Surface上的窗口分辨率

8 个答案: