Mention Windows Phone 8 IE10 responsive design bug in docs

Created by: robowerks

In working with Bootstrap today and testing on the Windows 8 Phone. I found the page would not scale right and displayed very small. Like viewing a web page that was not setup for Responsive Design at all. It turns out this is a Bug on the phone and Microsoft is aware of this and working to fix this problem. Now we all know how long it will take for the phone carriers to release updates like this. So I was testing this on the older versions of Bootstrap and even looked at the new Bootstrap 3 site with my phone and still see the problem. I simply added the following JavaScript code in the head and now it works right on my phone.

<script type="text/javascript">
<!--
(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);
    }
})(); 
//-->
</script> 

Thanks to the articles and research at the following link I was able to fix this. The only thing I really had to do was add the UA Sniffing to fix this on Bootstrap 2.3.2 version as the first JavaScript in the head. I'm sure this would also work with Bootstrap 3. I know it makes it nice to view on my Windows Phone 8 device.

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html