[wp-trac] [WordPress Trac] #25888: Default Themes: Add Mobile Viewport Handling for IE10+ "Snapped" View

[WordPress Trac]

#25888: Default Themes: Add Mobile Viewport Handling for IE10+ "Snapped" View
------------------------------+-----------------------------
 Reporter:  celloexpressions  |      Owner:
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Bundled Theme     |    Version:
 Severity:  major             |   Keywords:  has-patch
------------------------------+-----------------------------
 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. [http://blogs.msdn.com/b/ie/archive/2012/06/19/adapting-
 your-site-to-different-window-sizes.aspx 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
 [http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/#the-viewport-rule
 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...)

--
Ticket URL: <http://core.trac.wordpress.org/ticket/25888>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software