检测用JavaScript视网膜显示屏的iPad(Detecting a retina displa

我在使用只是一个问题检测视网膜的iPad（以及类似的设备） screen.availWidth和window.devicePixelRatio 。问题是，iPhone和iPad给骤降为数量screen.availWidth而Android设备似乎汇报物理像素数，所以我不能可靠地做screen.availWidth / window.devicePixelRatio来计算，如果屏幕是平板电脑的尺寸。

有没有我可以用它来帮助我一些其他的DOM属性？

编辑 -在某种程度上它希望明确概括起来，这个问题是不是重复

我怎么能知道screen.availWidth报告说，已经调整采取的帐户价值window.devicePixelRatio

Answer 1:

这应该帮助

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

UPDATE

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 => screen.availWidth已预先调节为DPR。

编辑它的工作原理！ http://jsbin.com/IzEYuCI/3/edit 。我会放在一起Modernizr的插件太

编辑和这里的拉请求得到它的Modernizr - https://github.com/Modernizr/Modernizr/pull/1139 。请给予好评，如果你觉得它有用

Answer 3:

这Modernizr的插件可以帮助： Modernizr的视网膜：HiDPI测试

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

文章来源: Detecting a retina display iPad with javascript