WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#25888 closed defect (bug) (fixed)

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

Reported by: celloexpressions Owned by: lancewillett
Milestone: 3.8 Priority: normal
Severity: major Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

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...)

Attachments (4)

twenty-fourteen-ms-viewport-before-after-context.png (307.9 KB) - added by celloexpressions 4 years ago.
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.
twenty-eleven-twelve-thirteen-ms-viewport-before-after.png (311.5 KB) - added by celloexpressions 4 years ago.
Before & After of Twenty Eleven, Twelve, and Thirteen snapped alongside each other. View at full size (1600x900) to see the scaling issues.
25888.ms-only.diff (2.2 KB) - added by celloexpressions 4 years ago.
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.
25888.diff (3.3 KB) - added by celloexpressions 4 years ago.
Add the unprefixed version as well, with a more general comment designed for the long term.

Download all attachments as: .zip

Change History (10)

@celloexpressions
4 years ago

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
4 years ago

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

@celloexpressions
4 years ago

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
4 years ago

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

#1 @celloexpressions
4 years ago

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).

#2 @celloexpressions
4 years ago

  • Summary changed from Default Themes: Add Mobile Viewport Handling for IE10+ "Snapped" View to Bundled Themes: Add Mobile Viewport Handling for IE10+ "Snapped" View, and consider supporting the @viewport media query

#3 @lancewillett
4 years ago

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

#4 @lancewillett
4 years ago

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.

#5 @lancewillett
4 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 26070:

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

#6 @SergeyBiryukov
4 years ago

  • Milestone changed from Awaiting Review to 3.8
Note: See TracTickets for help on using tickets.