检测HiDPI Windows Phone 8设备 [英] Detecting HiDPI Windows Phone 8 Devices

问题描述

如何检测运行Windows Phone 8的HiDPI设备？

How do I detect HiDPI devices running Windows Phone 8?

我正在测试的手机是诺基亚Lumia 920，它有一个4.5英寸1280×768屏幕（即> 300 dpi）。 IE支持CSS中的 min-resolution 但不支持 min-device-pixel-ratio 。使用此设备像素密度测试，Lumia报告 96 dpi 即可。这远远低于实际屏幕分辨率，并且将被视为常规的非HiDPI设备。

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.

由于IE尚未支持在JavaScript中的window.devicePixelRatio ，我找不到准确检测Lumia能够显示HiDPI图像的方法。

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.

推荐答案

查看 http://timkadlec.com/2013 / 01 / windows-phone-8-and-device-width /

理论上（我没有手机对此进行测试）如果你将以下所有内容添加到您的页面中，您应该被授予为Windows Phone 8和Windows 8设备获取有效DPR的能力。

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元视口（当前/传统的非W3C实现）

HTML meta viewport (current/legacy non-W3C implementations)

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

CSS @viewport（当前/未来的W3C草案实施）：

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禁用Windows Phone 8中元视口的古怪@viewport覆盖：

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);
}

然后 screen.width / document.documentElement.clientWidth 应为 window.devicePixelRatio 的有效近似值＃t00>正确实施screen.width 的所有移动浏览器

Then screen.width/document.documentElement.clientWidth should be a valid approximation of window.devicePixelRatio for all mobile browsers that correctly implement screen.width

这篇关于检测HiDPI Windows Phone 8设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！