Monday, August 19, 2013

Windows Phone 8 IE 10 Responsive Design Fix

It seems that WP8 with IE10 has a bug with responsive design viewports.  I found the widely used fix at http://timkadlec.com/2013/01/windows-phone-8-and-device-width/


Add the following CSS:

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}
 
Add the following JavaScript:
<script type="text/javascript">
    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);
    }
</script>

1 comments:

Mike J. Cantero

Wouldn't you be able to simply include @-ms-viewport{ width: auto!important } in your stylesheet? Prior IE just perceived the CSS viewport (disregarding the meta tag altogether)... so you ought to as of now have a @-ms-viewport tag in your styles. In the event that you need to stay with Javascript, could likewise verify that width is really situated to "device-width" before getting up and go - an additional layer of similarity:

var viewport = document.querySelector("meta[name=viewport]");
if( viewport && /device-width/.test(viewport[0].getAttribute("content")) ) {
// write the style tag here
}


iphoneunlockservice