检测 HiDPI Windows Phone 8 设备 [英] Detecting HiDPI Windows Phone 8 Devices
问题描述
如何检测运行 Windows Phone 8 的 HiDPI 设备?
我正在测试的手机是诺基亚 Lumia 920,它具有 4.5 英寸 1280 × 768 屏幕(即 > 300 dpi).IE 在 CSS 中支持 min-resolution
但不支持 min-device-pixel-ratio
.使用此设备像素密度测试,Lumia 报告 96 dpi强>.这远低于实际屏幕分辨率,会被视为普通的非 HiDPI 设备.
由于 IE(尚)不支持 JavaScript 中的 window.devicePixelRatio
,我无法找到一种方法来准确检测 Lumia 是否能够显示 HiDPI 图像.
查看 http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
理论上(我没有手机可以对此进行测试)如果您将以下所有内容添加到您的页面,您应该能够获得适用于 Windows Phone 8 和 Windows 8 设备的有效 DPR.>
HTML 元视口(当前/旧版非 W3C 实现)
CSS @viewport(当前/未来的 W3C 草案实现):
@-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 覆盖:
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
应该是 所有正确实现 screen.width 的移动浏览器
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)
<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
这篇关于检测 HiDPI Windows Phone 8 设备的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!