Question

我在使用screen.availWidth和window.devicePixelRatio检测视网膜iPad（和类似设备）时遇到问题。问题是iPhone和iPad给出了screen.availWidth的下降数量，而Android设备似乎报告了物理像素的数量，所以我无法可靠地screen.availWidth / window.devicePixelRatio来计算屏幕是否是平板电脑大小

我可以使用其他一些DOM属性来帮助我吗？

编辑 - 以一种有希望表明问题不重复的方式总结

如何判断screen.availWidth是否报告了已经调整过的值，以考虑window.devicePixelRatio

Answer 1

那应该有帮助

var retina = (window.retina || window.devicePixelRatio > 1);

<强>更新

Retina.isRetina = function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (root.devicePixelRatio > 1)
      return true;

    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
      return true;

    return false;
};

Answer 2

我没有对此进行测试，但这是我认为可行的方法。我有空的时候会为它做一个jsbin。

因为所有设备（据我所知）在将值传递给CSS媒体查询之前调整devicePixelRatio，我们可以（稍微伪代码）

衡量window.devicePixelRatio和screen.availWidth

将样式标记写入头部，其中包含类似于以下内容的媒体查询

#my-test-el {
  display: none;
  visibility: visible;
}

@media screen and (min-device-width:screen.availWidth) {
  #my-test-el {
 visibility: hidden;
  }
}

将<div id="my-test-el">附加到页面
读取style.visibility属性。如果它等于隐藏，则css值与screen.availWidth =＆gt;相同。 screen.availWidth已针对dpr。

编辑它有效！ http://jsbin.com/IzEYuCI/3/edit。我也会把一个modernizr插件放在一起

编辑以下是在Modernizr中获取它的拉取请求 - https://github.com/Modernizr/Modernizr/pull/1139。如果你发现它有用，请upvote

Answer 3

此Modernizr插件可能有所帮助：Modernizr Retina : HiDPI Test

注意：需要Modernizr的媒体查询功能

使用javascript检测视网膜显示器iPad

3 个答案: