New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mention Windows Phone 8 IE10 responsive design bug in docs #9162

Closed
robowerks opened this Issue Aug 6, 2013 · 6 comments

Comments

Projects
None yet
4 participants
@robowerks

robowerks commented Aug 6, 2013

In working with Bootstrap today and testing on the Windows 8 Phone. I found the page would not scale right and displayed very small. Like viewing a web page that was not setup for Responsive Design at all. It turns out this is a Bug on the phone and Microsoft is aware of this and working to fix this problem. Now we all know how long it will take for the phone carriers to release updates like this. So I was testing this on the older versions of Bootstrap and even looked at the new Bootstrap 3 site with my phone and still see the problem. I simply added the following JavaScript code in the head and now it works right on my 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> 

Thanks to the articles and research at the following link I was able to fix this. The only thing I really had to do was add the UA Sniffing to fix this on Bootstrap 2.3.2 version as the first JavaScript in the head. I'm sure this would also work with Bootstrap 3. I know it makes it nice to view on my Windows Phone 8 device.

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

@cvrebert

This comment has been minimized.

Member

cvrebert commented Aug 6, 2013

Ugh, browser-version-specific JS hack that uses user-agent sniffing...

@robowerks

This comment has been minimized.

robowerks commented Aug 6, 2013

Hey cvrebert, the problem I've seen only appears to be on the Windows Phone 8 devices and those run IE10 for the browser. This seems to be a general issue with Responsive Web pages and the way the phone handles the viewport. Pretty much anything I've built by hand in HTML5 with the viewport setting to check width does not display right on the Windows Phone. Using Bootstrap has the same result, A tiny hard to read web page. Microsoft knows about this and is working on a bug fix. The JavaScript was recommend only as a way to look and see if it was IE10 on a mobile device. If so then it makes the change or hack to allow it to work.

@mdo

This comment has been minimized.

Member

mdo commented Aug 6, 2013

Let's add a comment to the docs in browser support about this—we won't be implementing any sniffing hacks like this right now, but it is fair enough to gives folks a heads up.

@mdo mdo closed this Aug 6, 2013

@mdo mdo reopened this Aug 6, 2013

@robowerks

This comment has been minimized.

robowerks commented Aug 6, 2013

I just want to try and help people have the best user experience they can and if they happen to have a Windows Phone 8 its not a good experience to Pinch and Pan around. Its clearly a bug on the phone that hopefully gets fixed soon and can make it out from each mobile carrier to those using the devices. I'm really impressed with Bootstrap and I like my Windows Phone 8, I just don't like Pinching at Web Sites if I don't have to. If I can help the next WP8 Dev stop pulling hair out in using Bootstrap, then I'll be happy too.

@mdo

This comment has been minimized.

Member

mdo commented Aug 6, 2013

@robowerks Cool, does #9171 sound like a good middle ground for you?

@mdo mdo closed this in 287fdf8 Aug 6, 2013

mdo added a commit that referenced this issue Aug 6, 2013

Merge pull request #9171 from twbs/bs3_winph8_ie10_bug_town_usa_omgwt…
…fbbq

Fixes #9162: add mention of Windows Phone 8 and IE10 bugs with responsive foo
@backspinn

This comment has been minimized.

backspinn commented Jul 28, 2014

You made my day! I almost started to cry blood after updating a site to be responsive, a site with extremly many masterpages and scripts. The site had a webshop I developed a couple of years ago and has moved along from project to project, it has already been updated to bootstrap 2.3.2 in an other project so that´s the reason why I did not go for bootstrap 3 now. After +30 hours of upgrading markup and backend code and tests alongside in Chrome/FF/IE and tests in Android I was now also testing in my WP8 phone and it did not look good :-/.

I just pasted your JS in the head and wow, everything started to work! Thanks for sharing!

@twbs twbs locked and limited conversation to collaborators Jul 28, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.