Bundled Themes: Add Mobile Viewport Handling for IE10+ "Snapped" View, and consider supporting the @viewport media query

[celloexpressions]

This was just added to MP6. By default, IE10+ assumes that you want your site to be zoomed out when it is snapped alongside other apps so that the full width is visible. Rather than honoring the <meta> viewport, which is actually non. ​Some history here, but note that as of Windows 8.1 the snapped view can be any size from 1600px (with one small app snapped aside on a 1920 display) down to 320px, so the width: device-width; setting is best (and we've optimized for that anyway).

CSS @viewport is the correct/future-proof way to do what's currently done with the non-normative <meta name="viewport"> tag (see ​W3C working draft). Browser support is limited to IE10+ and Opera 11+, with both requiring vendor prefixing. However, it is only required for IE10+, since Opera (and IE10 Mobile) honor the meta tag. I recommend (and have patched) that we implement @-ms-viewport and @viewport (for way-future-proofing), or alternatively just @ms-viewport for now as it's required. While it looks like IE is doing it wrong, it turns out they're actually ahead of everyone else here (as they were in other places, like supporting unprefixed transitions in IE10), albeit in an annoying way.

It's just a couple of lines of css, and it makes a huge difference in usability, so we should add it to all of our responsive default themes (Twenty Eleven through Fourteen). See screenshots that contain before/afters of the different themes and context with other apps to give a better sense of the scaling (on a 1600x900px screen).

(PS everyone should add this to all of their themes...)

[celloexpressions]

Before & After of Twenty Fourteen in snapped view (on the right) with two other apps (one is the desktop) open on a 1600x900px screen. The other apps give a good sense of the scale; everything is tiny in the before but we get the gorgeous mobile view of Twenty Fourteen with the fix.

[celloexpressions]

Before & After of Twenty Eleven, Twelve, and Thirteen snapped alongside each other. View at full size (1600x900) to see the scaling issues.

[celloexpressions]

Fix the bug, telling IE to honor the device width like our meta tags do, but don't add the generalized and currently unsupported @viewport rules for all browsers.

[celloexpressions]

Add the unprefixed version as well, with a more general comment designed for the long term.

[celloexpressions]

The only reason not to go with 25888.diff​ would be if we just want a quick-fix since the W3C specs are still in flux and Chrome, Safari, and Firefox don't even support prefixed versions yet. It's probably worth going with this more general, long-term approach, though, since the default themes have such broad reach and usage.

Please note that the ms-only patch is required to fix the behavior for IE10+ now since it doesn't honor the meta tag. Going with the generalized version would fix the IE10+ issue and also introduce the future-standard, which is probably a good thing for us to do.

Also noting that the attached screenshots are with IE11 in Windows 8.1 (which is obvious if you're familiar with the changes in 11/8.1).

[lancewillett]

+1 for the future-thinking approach with 25888.diff.

[lancewillett]

In 26069:

Twenty Fourteen: implement UX features in spite of being non-standard CSS selectors that won't validate. @viewport for a better touch experience on Windows, and ::selection for better text selection styles. See #25888 and #25898, props celloexpressions.

[lancewillett]

In 26070:

Bundled Themes: implement Microsoft-specific @viewport rules for better responsive styling in Windows 8 "snapped" views. Props celloexpressions, fixes #25888.