Detecting HiDPI Windows Phone 8 Devices

Question

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.

Amann Malik · Answer 1 · 2013-02-03T06:26:33.390

8

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)

<meta name="viewport" content="width=device-width" />

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

edited Feb 03 '13 at 06:26

answered Feb 02 '13 at 04:16

Amann Malik

708
5
8

I don't have the Lumia with me right now, but I tested this on an iPhone 5. Both `screen.width` and `window.innerWidth` return 320. It's typical for browsers to return dimensions in CSS pixels (a.k.a. device independent pixels), instead of actual pixels. I imagine IE on Windows Phone 8 to behave similarly. – Andrew Feb 02 '13 at 05:25
screen.width on Apple devices is incorrect. see http://www.quirksmode.org/mobile/tableViewport.html#t00 – Amann Malik Feb 02 '13 at 05:39
Thanks for the info! I will give this a try after the weekend. – Andrew Feb 02 '13 at 06:11
+1, great workaround for WP8 always returns 96 for screen.deviceXDPI and screen.logicalXDPI – Sergei Grebnov Feb 02 '13 at 21:18
1

On the Lumia 920, `screen.width` reports 768 pixels regardless of orientation. This seems to disagree with Quirksmode's browser compatibility report, because IE10 is still giving portrait measurements when orientation is landscape. This hinders the ability to accurately calculate the ratio for all orientations. – Andrew Feb 07 '13 at 02:23
1

Damn, that's really annoying. I actually would prefer if vendors made screen variables static, that would make life so much easier. You could do a workaround like `var screenWidthPortrait = Math.min(screen.width, screen.height); var screenWidthLandscape = Math.max(screen.width, screen.height);` and then something like `function getDPR(){var currentWidth = document.documentElement.clientWidth; return (currentWidth === screenWidthPortrait)?screenWidthPortrait/currentWidth : screenWidthLandscape/currentWidth}` – Amann Malik Feb 07 '13 at 10:53
@amannm screen.width and screen.height will always return the portrait mode dimensions regardless of the current orientation, this is by design. Great solution anyway. Vendors are there to complicate our lifes while making money at the same time. – andreszs Feb 02 '15 at 02:16

Detecting HiDPI Windows Phone 8 Devices

1 Answers1

Linked