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

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

是否有一些其他的DOM属性可以帮助我？

编辑 - 综上所述方式，也希望明确指出，这个问题是不是重复

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

帐户的值

来源

2013-03-11 wheresrhys

可能重复[如何检测iPhone是否有视网膜显示？]（http：// stackoverflow。com/questions/11016339/how-to-detect-if-iphone-has-retina-display-or-not） – Raptor 2013-03-11 09:52:13

@ShivanRaptor不完全 - 'devicePixelRatio'可靠地告诉你它是否是视网膜显示器，但不一定告诉你需要处理多少次下沉 – wheresrhys 2013-03-11 09:53:55

你可以结合检测用户代理，默认情况下，浏览器告诉你设备型号 – Raptor 2013-03-11 09:55:07

我没有测试过这一点，但这里是一个办法，我认为可能会奏效。当我获得时间时，我会为它做一个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。请upvote，如果你觉得它有用

来源

2013-12-04 09:52:08 wheresrhys

对于阅读此内容的每个人来说，解决方案都会错误地将浏览器放大为highDPI /视网膜，并且不会识别缩小等于或大于“视网膜比例”的视网膜。 – 2017-04-26 07:34:13

这应该有助于

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

来源

2013-03-11 09:55:00 kidwon

它没有检测到有视网膜显示这是问题，它检测到有一定大小或更高的视网膜显示 – wheresrhys 2013-03-11 10:05:50

请原谅我，但是什么是视网膜显示它是更高的像素密度显示。所以如果这个比例高于1，它的意思是“如果它看起来像一只鸭子，像鸭子一样嘎嘎叫，像鸭子一样走路 - 那么它可能是一只鸭子” 直接从retinajs检测检查我的更新 – kidwon 2013-03-11 10:37:36

问题不在于检测显示器是否是视网膜它知道设备是否调整screen.availWidth本身或者如果您需要自己做。 – wheresrhys 2013-03-11 11:28:44

这Modernizr插件可以帮助：Modernizr Retina : HiDPI Test

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

来源

2013-03-11 09:57:58 Raptor

如果用户在非视网膜屏幕上放大了30％以上，则报告为真。 – 2017-04-25 12:30:02

公用事业几年未更新。您可能需要联系开发人员以获得帮助。 – Raptor 2017-04-26 03:42:27

是的，我知道这一点。这只是对其他读者的评论，要了解其局限性。我还没有找到任何方法来做一个适当的检测，但插件可以改进，以作出更好的猜测。 – 2017-04-26 07:29:00

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

回答

相关问题