Getting Bootstrap to work on Windows Phone 8

By rickvdbosch

- 1 minutes read - 196 words

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;
}
  1. Add this line to the head tag of your HTML page (it’s probably already there since you’re using Bootstrap)
(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