During a bit of site testing, I encountered a rather strange bug when viewing a site that was developed using the incredible Twitter Bootstrap.
The Responsive collapsing navigation menu didn’t appear to work at all and all of the menu items that were present were all jumbled around. It not only looked bad, but it severely hindered the usability of the site at all.
After some research, I came across the following snippet that appeared to resolve the issue. Simply paste this into the <head> section of your application and it should hopefully resolve your Bootstrap issues on Windows Phone devices:
- <!-- Bootstrap Fix for Windows 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>