Skip to content
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

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

Closed
laurentperez opened this Issue Sep 6, 2013 · 3 comments

Comments

Projects
None yet
2 participants
@laurentperez
Copy link

laurentperez commented Sep 6, 2013

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

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 6, 2013

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

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 6, 2013

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

This comment has been minimized.

Copy link
Author

laurentperez commented Sep 6, 2013

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

mdo added a commit that referenced this issue Sep 11, 2013

@mdo mdo closed this in 2dc7ab4 Sep 11, 2013

mdo added a commit that referenced this issue Sep 11, 2013

Merge pull request #10584 from twbs/ie_viewports
Fixes #10497: Fix Windows 8 and Windows Phone 8 behavior and apply to docs

@mdo mdo referenced this issue Sep 11, 2013

Closed

BS3.0.1 ship list #10050

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.