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:
- Add this line to use
–ms-viewport in your CSS file
- Add this line to the head tag of your HTML page (it’s probably already there since you’re using Bootstrap)
if ("-ms-user-select" in document.documentElement.style &&
var msViewportStyle = document.createElement("style");
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