Rendering on WP8

Mar 3, 2014 at 11:14 AM
I'm having some issues with the navigation bar on WP8 - the navbar doesn't collapse properly. Instead of a neat bar with a button, like on desktop and other mobile platforms, the navbar is open downwards and all the links are visible. I've also noticed that some small styling rules are being ignored (like corner radius) which are not being ignored on other platforms.

Can anyone else confirm? Is there something I'm missing that would make the navbar behave as expected?
Mar 3, 2014 at 12:51 PM
Resolved it - I removed

@-ms-viewport {
width: device-width;
}


from the bootstrap3-custom.css file. The big for the workaround above seems to have been resolved as of October 2013, so Windows Phones running an updated version since then will not display correctly with the above CSS rule.
Coordinator
Mar 3, 2014 at 4:27 PM
Hi,

Hm, I am not sure that the fix for Windows Phone 8 is complete. I have found that I still need the @-ms-viewport but along with that there needs to be a little extra JS code.
/*windows 8 phone fix*/
(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);
    }
})();
The package should have both the @-ms-viewport style as well as the javascript fix. When combined they should allow your site to work across Windows Phone 8 as well. Did you leave this JS code in the project?

Eric