window.devicePixelRatio does not work in IE 10 Mobile?

Question

I am using window.devicePixelRatio which works on Andriod and Iphone but does not work in IE 10 Windows mobile. any alternative?

Answer 1

I found that on a Nokia Lumia 1230 the property window.devicePixelRatio returns 1 even if the value is clearly incorrect. Testing for window.screen.deviceXDPI / window.screen.logicalXDPI returns 1.52083333. So using window.devicePixelRatio first is not a good idea.

I would suggest the following:

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

For some reason, using the best way to test for the presence of the deviceXDPI in the screen object:

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

does not work on this phone.

Answer 2

Actually, none of the previous answers are correct. All tests below were made on Lumia 520 phones having an LCD screen of 480*800:

WP8/IE Mobile 10:

• window.devicePixelRatio = undefined
• window.inner/outerWidth/Height = 320*485
• screen.[avail]Width/Height = 330*549
• document.body.clientWidth/Height = 320*486
• screen.device/logicalXDPI = 140/96 = 1.45833..

Expected devicePixelRatio is 480/320 = 1.5 which can be calculated by:

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

(The rounding is needed to get a valid LCD screen size)

WP8.1/IE Mobile 11:

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

Expected devicePixelRatio is (once again) 480/320 = 1.5 which can be calculated by:

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

So even if window.devicePixelRatio is present it will give you the ratio between DOM screen size and LCD screen size, however, the DOM screen size is larger than the available viewport size. If you want to know the exact ratio between CSS pixels and device pixels, then you have to make the calculations above. Also, these calculations are valid in portrait mode. In landscape mode use screen.availHeight instead (DOM screen dimensions do not change on orientation change on IE Mobile).

Answer 3

window.devicePixelRatio = window.devicePixelRatio || 
Math.round(window.screen.availWidth / document.documentElement.clientWidth)

Got it from 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 4

For a IE fallback, both desktop and mobile, use:

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