There are a couple of websites I manage that use Twitter Bootstrap*. These websites are fully responsive and work well on all devices. Or actually, almost all devices. The wrapping of columns in a container on a Windows Phone doesn’t work the way you’d want it out of the box. Windows Phone interprets device-width as the actual resolution size. Other mobile browsers use what the manufacturer (or browser vendor) has decided is the optimal viewport width.

To fix this issue, follow these steps:

  1. Add this line to use –ms-viewport in your CSS file
    @-ms-viewport{
        width: device-width;
    }
  2. Add this line to the head tag of your HTML page (it’s probably already there since you’re using Bootstrap)
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  3. Add this JavaScript function as the first script in the head tag (because of a timing issue it won’t work if it isn’t the first script)
    (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);
        }
    })();

I found this solution over at Matt Stow’s blog ‘Firewoiks’. You can find the original article here.

Hope this helps.

* The Bootstrap project is no longer under the Twitter brand.

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. – about Bootstrap