Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

@-ms-viewport rule doesn't work in WP8 IE10 #62

Open
stowball opened this Issue Jan 8, 2013 · 1 comment

Comments

Projects
None yet
1 participant

stowball commented Jan 8, 2013

I've written a post explaining that it doesn't work here: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

You need to use this instead:

@media (max-width: 400px) { /* or 25em to be "responsibly responsive" */
    @-ms-viewport {
        width: 320px;
    }
}

Microsoft have offered a solution to the viewport bug. I've described it here: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html#update-2013015

Basically, they want us to continue using

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

and then using a script immediately after the CSS to modify the viewport for IE 10.0 only

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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment