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

Add the following CSS:

Add the following JavaScript:
<script type="text/javascript">
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement("style");


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