zk_2la
Last Updated: February 25, 2016
·
11.24K
· stowball

Responsive Design in IE 10 on Windows Phone 8

Microsoft unfortunately broke responsive design in IE 10 on Windows Phone 8 by interpreting the meta/CSS viewport device-width as the actual resolution width, not the visual viewport width.

Microsoft will fix this bug in the next release of Windows Phone 8, however, in the meantime, you'll need JavaScript to fix the current buggy devices.

Here's the complete solution:

In your CSS, specify the viewport with the CSS Device Adaptation method:

@-ms-viewport{
    width: device-width;
}

In your markup, use the standard meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

In your markup, as the first JavaScript in the head, add:

(function() {
    if ("-ms-user-select" in document.documentElement.style && 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);
    }
})();

This code specifically targets version IE Mobile 10.0 (I've also added an extra condition to ensure it only happens in IE), so future, fixed versions will be untouched. It's worth noting that JavaScript cannot be disabled on Windows Phone 8, so this code will always run.

For the whole story, read this: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

5 Responses
Add your response

5411

good stuff

over 1 year ago ·
8539

Can't you just add @-ms-viewport{ width: auto!important } in your stylesheet? Earlier IE only recognized the CSS viewport (ignoring the meta tag altogether)... so you should already have an @-ms-viewport tag in your styles. If you want to stick with javascript, could also make sure that width is actually set to "device-width" before moving forward - an extra layer of compatability:

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

@designbyonyx No this is a bug that Microsoft acknowledged and fixed in WP8 Update3... unfortunately many devices will be pre-update3 for quite some time. If you use your method it will break your site's responsiveness in Windows 8 SnapTo... Unfortunately Javascript is the only way http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

over 1 year ago ·
12196

Thanks for the explanation. When I tried applying it, I get the following error in my MVC application.

System.Web.HttpParseException (0x80004005): "-" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.

Any comments?

over 1 year ago ·
13793

Hi

I tried to implement it in the landing page:
http://fulbright.org.il/uspostdoc/
but it's still not working goods on Nokia lumia 820 wunning windows pone
Can you see what is my problem?

Ilan

over 1 year ago ·