5

我正在使用适用于 Andriod 和 Iphone 但不适用于 IE 10 Windows mobile 的 window.devicePixelRatio。有什么选择吗？

4

4 回答 4

18

对于桌面和移动设备的 IE 后备，请使用： 

window.devicePixelRatio = window.devicePixelRatio || 
                          window.screen.deviceXDPI / window.screen.logicalXDPI;
于 2013-11-25T21:55:48.357 回答
7 
window.devicePixelRatio = window.devicePixelRatio || 
Math.round(window.screen.availWidth / document.documentElement.clientWidth)

从http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/08/internet-explorer-10-brings-html5-to-windows-phone-8-in-a-big得到它-way.aspx

于 2013-05-05T10:49:40.673 回答
3

我发现在诺基亚 Lumia 1230 上，属性 window.devicePixelRatio 会返回 1，即使该值明显不正确。测试 window.screen.deviceXDPI / window.screen.logicalXDPI 返回 1.52083333。所以首先使用 window.devicePixelRatio 并不是一个好主意。

我建议如下：

function getDevicePixelRatio (){
    var pixelRatio = 1; // just for safety
    if('deviceXDPI' in screen){ // IE mobile or IE
        pixelRatio = screen.deviceXDPI / screen.logicalXDPI;
    } else if (window.hasOwnProperty('devicePixelRatio')){ // other devices
        pixelRatio = window.devicePixelRatio;
    }
    return   pixelRatio ;
}

出于某种原因，使用最好的方法来测试屏幕对象中是否存在 deviceXDPI：

    if(screen.hasOwnProperty('deviceXDPI')) {// IE mobile or IE

不适用于此手机。

于 2014-07-23T15:21:09.987 回答
2

实际上，前面的答案都不是正确的。以下所有测试均在具有 480*800 LCD 屏幕的 Lumia 520 手机上进行：

WP8/IE 移动版 10：

  • window.devicePixelRatio = 未定义
  • window.inner/outerWidth/Height = 320*485
  • screen.[avail]宽/高= 330*549
  • document.body.clientWidth/Height = 320*486
  • screen.device/logicalXDPI = 140/96 = 1.45833..

预期的 devicePixelRatio 为480/320 = 1.5，可以通过以下方式计算：

Math.round(screen.availWidth * screen.deviceXDPI / screen.logicalXDPI / 4) * 4 / document.body.clientWidth

（需要四舍五入才能获得有效的 LCD 屏幕尺寸）

WP8.1/IE 移动版 11：

  • window.devicePixelRatio = 1.42177...
  • window.outerWidth/Height = 338*512
  • window.innerWidth/Height = 320*485
  • screen.[avail]宽/高=338*563
  • document.body.clientWidth/Height = 320*486
  • screen.device/logicalXDPI = 136/96 = 1.4166..

预期的 devicePixelRatio 是（再次）480/320 = 1.5，可以通过以下方式计算：

Math.round(screen.availWidth * window.devicePixelRatio / 4) * 4 / document.body.clientWidth

因此，即使存在 window.devicePixelRatio，它也会为您提供 DOM 屏幕尺寸和 LCD 屏幕尺寸之间的比率，但是，DOM 屏幕尺寸大于可用视口尺寸。如果您想知道 CSS 像素和设备像素之间的确切比例，则必须进行上述计算。此外，这些计算在纵向模式下有效。在横向模式下使用 screen.availHeight 代替（DOM 屏幕尺寸不会随着 IE Mobile 上的方向变化而改变）。

于 2015-10-12T19:51:55.813 回答