window.devicePixelRatio does not work in IE 10 Mobile?

问题:

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

回答1:

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

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

回答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

回答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.

回答4:

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

文章来源: window.devicePixelRatio does not work in IE 10 Mobile?