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

Created by: 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