@ms-viewport should not be sent on all mobiles, only on Surface

[laurentperez]

Hi

We've been qualifying Bootstrap on a WP8 device and hit a bug, the @ms-viewport rules contained in responsive-utilities.less should not be sent to WP8 mobile phones, only the Surface should received a @-ms-viewport{ width: device-width;} style to fix the Snap mode view.

Currently the ms viewports are sent no matter what, by doing so, the viewport will NOT be applied, for example if you load http://getbootstrap.com/ on a HTC 8X you'll see that everything looks zoomed out, it's because the @ms-viewport is bugged on the 8X (it works on the Surface). The meta viewport attribute will be honored if present.

The comments in responsive-utilities.less refer to http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ which is - sort of - wrong by assuming it's ok to send @ms-viewport rules to every WP8 device, but it's not.

1- all @ms-viewports should be removed from CSS
2- instead, a JS fix could be to detect the Surface and create the viewport :

if (navigator.userAgent.match(/Windows NT 6.2; ARM(.+)Touch/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:device-width}"
        )
    );
    document.getElementsByTagName("head")[0].
        appendChild(msViewportStyle);
}

3- the Lumia fix should be done in JS too and specifically look for "Lumia" in navigator.userAgent

Regards
laurent

[cvrebert]

We mention the hacky JS workaround for the Lumia in the docs (http://twbs.github.io/bootstrap/getting-started/#browsers ), but we're not gonna incorporate it into the framework itself.

[cvrebert]

Is there any resource you can point us to (so that we can reference it in the docs) that talks about the Surface having this problem?

[laurentperez]

yes, the Surface snap fix @-ms-viewport{width:device-width} is described at http://www.mobilexweb.com/blog/windows-8-surface-ie10-html5

it's pure CSS, and it works, however it should only be sent to the Surface, if you send it to a Lumia 820 or HTC 8X, it will break their viewport, that's why I believe @-ms-viewport should be removed from the CSS, the JS fix @-ms-viewport{width:auto!important} at http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ is working for the Lumia 820 and HTC 8X