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

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

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

Answer 2

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 3

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.