使用javascript检测视网膜显示器iPad [英] Detecting a retina display iPad with javascript

问题描述

我在使用 screen.availWidth 和 window.devicePixelRatio 。问题是iPhone和iPad给出 screen.availWidth 的下降数量，而Android设备似乎报告物理像素的数量，所以我无法可靠地做 screen.availWidth / window.devicePixelRatio 计算屏幕是否为平板电脑尺寸。

I'm having a problem detecting a retina iPad (and similar devices) using just screen.availWidth and window.devicePixelRatio. The problem is that iPhones and iPads give the number of dips for screen.availWidth whereas android devices seem to report the number of physical pixels so I can't reliably do screen.availWidth / window.devicePixelRatio to calculate if the screen is of a tablet size.

是否有其他DOM属性我可以用来帮助我吗？

Is there some other DOM property I can use to help me?

编辑 - 总结一下希望明确问题不重复的方式

edit - To sum up in a way which hopefully makes clear that the question isn't a duplicate

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

How can I tell if screen.availWidth reports a value that has already been adjusted to take account of window.devicePixelRatio

推荐答案

我没有测试过这个，但这是我认为的一种方法可能有用。当我有时间时，我会为它做一个jsbin。

I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.

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

Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)

1. 测量 window.devicePixelRatio 和 screen.availWidth

将样式标记写入头部，其中包含类似于关注

Write a style tag to the head which includes a media query something like the following

#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> 到页面

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

edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too

编辑这里是在Modernizr中获取它的拉取请求 - https://github.com/Modernizr/Modernizr/pull/1139 。如果你觉得它有用，请upvote

edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful

这篇关于使用javascript检测视网膜显示器iPad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！