Detecting HiDPI Windows Phone 8 Devices

我的未来我决定 提交于 2019-11-30 05:10:18
amannm

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!