window.devicePixelRatio在IE 10 Mobile中不起作用？

Question

我正在使用window.devicePixelRatio，它可以在Andriod和Iphone上運行，但在IE 10 Windows Mobile中不起作用。 任何替代？

Answer 1

對於桌面和移動設備的IE后備，請使用：

window.devicePixelRatio = window.devicePixelRatio || 
                          window.screen.deviceXDPI / window.screen.logicalXDPI;

Answer 2

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

Answer 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

不適用於這款手機。

Answer 4

實際上，以前的答案都不正確。 以下所有測試均在Lumia 520手機上進行，液晶屏幕為480 * 800：

WP8 / IE Mobile 10：

• window.devicePixelRatio = undefined
• window.inner / outerWidth / Height = 320 * 485
• 屏幕。[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 Mobile 11：

• window.devicePixelRatio = 1.42177 ...
• window.outerWidth / Height = 338 * 512
• window.innerWidth / Height = 320 * 485
• 屏幕。[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上的方向更改時不會改變）。