4

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

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

编辑- 总结一下，希望能清楚地表明问题不是重复的

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

4

3 回答 3

4

那应该有帮助

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;
};
于 2013-03-11T09:55:00.770 回答
1

我没有对此进行测试，但这是我认为可能有效的方法。有时间我会为它做一个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属性。如果它等于隐藏，则 css 值与 screen.availWidth => screen.availWidth 已为 dpr 预先调整的值相同。

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

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

于 2013-12-04T09:52:08.180 回答
0

这个Modernizr插件可能会有所帮助：Modernizr Retina：HiDPI 测试

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

于 2013-03-11T09:57:58.420 回答