Geeks With Blogs
dotGeek by robert.owens

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.

WP_20130806

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>

WP_20130806 1

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

Posted on Tuesday, August 6, 2013 1:38 PM WP8 , Bootstrap , Responsive Web Design | Back to top


Comments on this post: How to fix the Bootstrap issue on Windows Phone 8

# re: How to fix the Bootstrap issue on Windows Phone 8
Requesting Gravatar...
Thanks for the tip! I'm just getting started with bootstrap, and I'm sure this will save me many headaches
- fellow wp8 user
Left by Chris on Aug 22, 2013 9:38 PM

# re: How to fix the Bootstrap issue on Windows Phone 8
Requesting Gravatar...
Awesome! thanks for sharing!
Left by Feddman on Dec 15, 2013 7:56 AM

# re: How to fix the Bootstrap issue on Windows Phone 8
Requesting Gravatar...
Thanks for sharing, I've been tearing my hair out for the last couple of days wondering what I'd done wrong to make my site display incorrectly on my Windows Phone. I was almost about to scrap bootstrap and start from scratch with another framework.
Left by Nigel on Mar 13, 2014 7:36 PM

# re: How to fix the Bootstrap issue on Windows Phone 8
Requesting Gravatar...
Thanks this works!
Left by mygil on Mar 30, 2014 1:32 AM

# re: How to fix the Bootstrap issue on Windows Phone 8
Requesting Gravatar...
Hi

I tried to implement it in the landing page:
http://fulbright.org.il/uspostdoc/
but it's still not working goods on Nokia lumia 820 running windows pone
Can you see what is my problem?

Thanks

Ilan
Left by ilan on Mar 30, 2014 8:42 AM

# re: How to fix the Bootstrap issue on Windows Phone 8
Requesting Gravatar...
Thanks for sharing.
Really, you just saved me from having a nervous breakdown! :D
Left by Marcello on Apr 08, 2014 3:22 AM

Your comment:
 (will show your gravatar)


Copyright © dotgeek | Powered by: GeeksWithBlogs.net