Responsive web design is the way to go these days and with so many screen sizes from desktop and on down to the smartphones, making use of some design frameworks can make things really easy in developing sites quickly.
Twitter Bootstrap is just one of these frameworks and it has a lot to offer someone looking to get started in building some responsive web sites. The only problem is it will not display correctly on my brand new Windows Phone 8. It was almost a stopping point for me and a reason to look into other options instead.
What I later found out, is its more of a bug on Windows Phone 8 and perhaps even Windows 8 tablets than anything else. This means all responsive web design efforts might not look right for these users. Microsoft is aware of this and working to fix this issue, but we know it can take time for bug fixes to be released and sent out by the phone carriers to their end users. That means a number of sites being built with Bootstrap and viewed on a Windows Phone 8 device will have to pinch and pan around to see all the content.
The other option is to come up with a fix to help out these viewers and provide a better User Experience. Here is the recommended fix that I added in my head tag of my Bootstrap project and as the very first JavaScript ran on the page, as suggested too.
<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>
The following article link pointed me in the right direction and detailed the cause of the problem on Windows Phone 8. They had about three suggestions to fix the issue and the only thing that I really needed was the adding of the UA sniffer JavaScript for checking for IE on a mobile device. Now my Bootstrap test project works like it should and displays just fine on my Windows Phone 8 device.
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html