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

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).