使用Javascript检测Retina显示屏的iPad

Question

我遇到了一个问题，就是使用 screen.availWidth 和 window.devicePixelRatio 时无法检测视网膜 iPad（以及类似设备）。问题在于，iPhone 和 iPad 给出的是 screen.availWidth 的 dips 值，而安卓设备似乎报告物理像素数，因此我不能可靠地使用 screen.availWidth / window.devicePixelRatio 计算屏幕是否为平板电脑尺寸。

有没有其他 DOM 属性可以帮助我？

编辑 - 总之，希望以下方式能够清楚地表明这个问题不是重复的

如何判断 screen.availWidth 是否已经调整以考虑 window.devicePixelRatio 的值。

- wheresrhys

---

可能是重复的问题：如何检测iPhone是否具有Retina显示屏？ - Raptor

@ShivanRaptor 不完全是这样 - devicePixelRatio 可靠地告诉您它是否为 retina 显示屏，但并不一定告诉您要处理多少 dips。 - wheresrhys

您可以结合检测用户代理来确定设备型号，其默认情况下由浏览器告知。 - Raptor

@Shivan_Raptor ... 但这并不是未来可持续的。 - wheresrhys

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

- kidwon

---

问题不在于它无法检测到视网膜显示屏，而在于它无法检测到特定尺寸或以上的视网膜显示屏。 - wheresrhys

请原谅我，什么是视网膜显示屏？它具有更高的像素密度。因此，如果比例大于1，这意味着什么？“如果看起来像鸭子，叫起来像鸭子，走起路来像鸭子——那么它很可能就是一只鸭子。”请检查我的更新，直接从retinajs检测。 - kidwon

问题不在于检测显示器是否为Retina，而在于知道设备是否会自动调整屏幕可用宽度(screen.availWidth)，还是需要手动调整。 - wheresrhys

Answer 2

我还没有测试过这个方法，但是我认为下面的方法可能有效。等我有时间时会在jsbin上进行测试。

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

1. 测量 window.devicePixelRatio 和 screen.availWidth

2. 在头部写一个样式标签，其中包含类似以下媒体查询的内容

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

3. 将 <div id="my-test-el"> 添加到页面中

4. 读取 style.visibility 属性。如果它等于 hidden，则 css 值与 screen.availWidth 相同 => screen.availWidth 已经预先调整了 dpr。

编辑 它成功了！ http://jsbin.com/IzEYuCI/3/edit。我也会制作一个现代化插件

编辑 这是一个拉取请求，用于将其放入Modernizr中 - https://github.com/Modernizr/Modernizr/pull/1139。如果您觉得有用，请点赞

- wheresrhys

---

对于所有阅读此内容的人，该解决方案错误地将缩放的浏览器识别为高DPI / Retina，并未识别出缩小的视网膜等于或大于“视网膜比例”的视网膜。 - Fredrik C

Answer 3

这个 Modernizr 插件可能会有所帮助：Modernizr Retina : HiDPI Test

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

- Raptor

---

如果用户在非Retina显示器上放大超过30％，则报告为真。 - Fredrik C

该实用程序已经好几年没有更新了。您可能需要联系开发人员寻求帮助。 - Raptor

是的，我知道这一点。这只是为其他人阅读此评论，了解其限制而发表的评论。我还没有找到任何方法来进行正确的检测，但插件可以改进以做出更好的猜测。 - Fredrik C