5

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

Imran Qadir Baksh - Baloch
  • 32,612
  • 68
  • 179
  • 322

4 Answers4

18

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

window.devicePixelRatio = window.devicePixelRatio || 
                          window.screen.deviceXDPI / window.screen.logicalXDPI;
guari
  • 3,715
  • 3
  • 28
  • 25
7
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

Imran Qadir Baksh - Baloch
  • 32,612
  • 68
  • 179
  • 322
  • 1
    That fallback seems **incorrect** because `availWith` and `clientWidth` are both in [dips](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) and because `clientWidth` is a dynamic value. The CSS unit for `devicePixelRatio` is [dppx](http://www.w3.org/TR/css3-values/#dppx). – ryanve Sep 17 '13 at 20:42
  • 3
    `devicePixelRatio` could be a fractional value, so `Math.round` is out of place, but whatever. Just don't use the fallback if you're not sure the window is maximized (which means on all desktop clients). Moreover, `document.documentElement.clientWidth` doesn't include the scrollbar width on desktop browsers. – MaxArt Mar 20 '14 at 08:49
  • @user960567 I think a comment is fine. There are a lot of caveats for fallbacks for `devicePixelRatio`. – MaxArt Mar 20 '14 at 11:18
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.

Paolo Mioni
  • 1,008
  • 10
  • 17
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).

szd
  • 106
  • 3