How to fix Bootstrap Internet Explorer 10 in Windows 8 and Windows Phone 8

Tuesday 07th, Jul, 2015 |


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.

/* =================================
===  Bootstrap Internet Explorer 10 in Windows 8 and Windows Phone 8 FIX
=================================== */
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}