How do I detect HiDPI devices running Windows Phone 8?
The phone I'm testing is the Nokia Lumia 920, which has a 4.5-inch 1280 × 768 screen (i.e. > 300 dpi). IE supports min-resolution in CSS but not min-device-pixel-ratio. Using this device pixel density test, the Lumia reports 96 dpi. This is far lower than the actual screen resolution, and would be considered a regular non-HiDPI device.
Since IE doesn't (yet) support window.devicePixelRatio in JavaScript, I can't find a way to accurately detect the Lumia as capable of displaying HiDPI images.
Check out http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
Theoretically (I don't have a phone to test this on) if you add all of the following to your page you should be granted the ability to get a valid DPR for both Windows Phone 8 and Windows 8 devices.
HTML meta viewport (current/legacy non-W3C implementations)
CSS @viewport (current/future W3C draft implementations) :
@-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width}
Javascript to disable the quirky @viewport override of meta viewport in Windows Phone 8 :
if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode( "@-ms-viewport{width:auto!important}" ) ); document.getElementsByTagName("head")[0]. appendChild(msViewportStyle); }
Then screen.width/document.documentElement.clientWidth should be a valid approximation of window.devicePixelRatio for all mobile browsers that correctly implement screen.width
