tech support 8

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Wednesday, 22 May 2013

IE10, Metro, and Media Queries

Posted on 13:42 by Unknown

IE10 in desktop view.
IE10 in Metro view.
The image on the left is IE10 in desktop view, on the right is IE10 in Metro view, both on the same device and at the same dimensions and screen resolution.




I worked pretty hard on our corporate site to test on as many devices and browsers as possible, trying to ensure that my media queries were solid and I was staying cutting edge without being bleeding edge. You might recall that I am already not a fan of testing in Internet Explorer emulation modes, but now I think I need to get the hardware to go along with my IE testing.




I recently picked up a Windows 8 tablet, making sure it had both the desktop and the (formerly-named) Metro interface. I set about testing the Algonquin Studios site in Internet Explorer 10 in both modes and was surprised to see that in the tablet / Metro mode my media queries were being mostly ignored (the site is built mobile first, so it honored the desktop queries). I took some screen captures and reached out to the Twitters for help.




Roger Johansson was kind enough to help:



@aardrian You may need @-ms-viewport {width:device-width;zoom:1.0; }

— Roger Johansson (@rogerjohansson) May 22, 2013




This sounded familiar but I did some digging (now that I had some direction) and came across this note in a six-month-old MSDN article:





By default, Internet Explorer automatically scales content when the window is narrower than 1024px. This primarily includes the snapped state and portrait mode. If the @-ms-viewport rule is specified, it overrides default scaling.




In cases where scaling is not needed or desired, the device-width keyword can be used. This keyword signifies that the page is optimized to work well regardless of the dimensions of the window.




When using this keyword, make sure that the page continues to work well in a variety of window sizes, including the narrow snapped state and portrait modes.





My tablet's width is 768 pixels, so it definitely fell under the 1,024 pixels that trigger scaling. This note, however, doesn't provide any context for how this only affects IE10 in Metro mode, because the media queries clearly work fine when using IE10 in the desktop mode.




I excluded the zoom:1.0; from Roger's tweet, popped open my CSS file, and added @-ms-viewport { width: device-width; } right to the top of the file, outside of any media queries. I deployed it and all was well (I actually went through a full testing pass, test deploy, and the likes, but that part of the story isn't very interesting).




Perhaps everyone else already knows this and I am incredibly late to the game, but just in case there's someone who is stuck or doesn't have access to the right IE10 configuration, I hope this helps.




The lesson I learned here is that if I want to properly test Internet Explorer 10, I can't rely on a desktop installation on Windows 7 or Windows 8, I need to also test in the Metro interface and, ideally, on the appropriate hardware as well. Looking at my logs, I see more than a few users who have come to the site with an IE10/Win8 configuration who may very well have thought the site was not responsive.




For those interested, this screen capture shows my home page after deploying the CSS update:




IE10 in Metro view, after the CSS update
IE10 in Metro view, after the CSS update. You can see that my media queries have fired.



Update: May 24, 2013




Thanks to Matt Stow's comment below (which demonstrated my clear lack of Google-fu), I now know of some resources online that have been down this path and also addressed the best approach to supporting Windows 8 Snap Mode (example of Snap Mode below if you are unfamiliar with this). It turns out that Windows Phone 8 has a bug which makes my solution inadequate, although there is a scripting fix in Matt Stow's article which you can layer on top of this. On to the links:




  • IE10 Snap Mode and Responsive Design, OCtober 17, 2012 by Tim Kadlec.

  • Windows Phone 8 and Device-Width, January 14, 2013 by Tim Kadlec.

  • Responsive Design in IE10 on Windows Phone 8, January 6 2013 by Matt Stow.





Screen shot of Windows 8 Snap Mode in use.

This screen shot shows the Snap Mode of Windows 8. As you can see, while playing my virtual accordion I decided that I absolutely had to also surf my company web site, which renders quite nicely thanks to the fix I implemented at the start of this article.



Update: October 15, 2013




Matt Stow reports that Microsoft has fixed the Windows Phone 8 viewport issue.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in css, Internet Explorer, mobile, standards, touch | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Browser Performance Chart
    Jacob Gube has posted a handy chart over at Six Revisions titled " Performance Comparison of Major Web Browsers ." He tests the c...
  • Google Dashboard: What Google Knows about You
    Google announced a new service/feature today, Google Dashboard . Given all the services Google offers and all the ways you can interact with...
  • Facebook, HTML5, and Mis-Reporting
    My Twitter stream and the headlines of sites across the web yesterday lit up with Facebook's CEO blaming its stock price (failure to mee...
  • App Store Meta Tags
    Why yes, Dominos, I'd love to tap again to get your real home page to order a pizza when I could have done it right here, below your ove...
  • Speaking at Mom 2.0 in Houston, TX
    I will be in Houston this week to speak at the Mom 2.0 Summit (Feb. 18-20, 2010, Houston, TX). To make it a little easier to describe, here...
  • Codepen Has Handy Sharing Tools for Devs
    There are plenty of online resources for playing around with code right in the browser, no server of your own needed, that you can then shar...
  • History of Eye-Tracking as Research Tool
    If you've ever wondered what eye-tracking is and where it came from, there is a historical breakdown in the article A Brief History of E...
  • Opera: Presto! It's now WebKit
    Opera is replacing its Presto rendering engine with WebKit (Chromium, really, when you factor in the V8 JavaScript rendering engine). Big n...
  • The Science of Trust in Social Media
    I am one of those people who always needs to see proof of some assertion, evidence to back up a claim. While I can accept anecdotal evidence...
  • Developer Discusses Dyslexia and Dyscalculia
    Sabrina Dent , a web designer hailing from Ireland, has blogged about her struggle with dyslexia and dyscalculia and web applications today...

Categories

  • accessibility
  • Adobe
  • analytics
  • Apple
  • apps
  • ARIA
  • Bing
  • Blink
  • Brightkite
  • browser
  • Buzz
  • Chrome
  • clients
  • css
  • design
  • Facebook
  • Firefox
  • Flash
  • fonts
  • food
  • Foursquare
  • g11n
  • geolocation
  • globalization
  • Google
  • Gowalla
  • html
  • i18n
  • ICANN
  • infographic
  • Instagram
  • internationalization
  • internet
  • Internet Explorer
  • JavaScript
  • JAWS
  • Klout
  • L10n
  • law
  • localization
  • Lynx
  • Mapquest
  • Microsoft
  • mobile
  • Netscape
  • ning
  • Opera
  • patents
  • picplz
  • Plus
  • print
  • privacy
  • project management
  • QR
  • rant
  • RSS
  • Safari
  • SCVNGR
  • search
  • SEM
  • SEO
  • social media
  • Sony
  • speaking
  • standards
  • SVG
  • touch
  • translation
  • Twitter
  • typefaces
  • usability
  • UX
  • Verizon
  • video
  • W3C
  • WAI
  • WCAG
  • WebKit
  • whatwg
  • Wired
  • WOFF
  • xhtml
  • Yahoo
  • YouTube

Blog Archive

  • ▼  2013 (39)
    • ►  December (1)
    • ►  November (7)
    • ►  September (4)
    • ►  July (3)
    • ►  June (2)
    • ▼  May (5)
      • My Kingdom for Decimal Alignment on Numbers
      • IE10, Metro, and Media Queries
      • My Presentation Slides: Making Your Site Printable
      • Balancing Act: Features, Budgets & Timelines at We...
      • Don't Use Global Browser Stats
    • ►  April (3)
    • ►  March (6)
    • ►  February (2)
    • ►  January (6)
  • ►  2012 (63)
    • ►  December (2)
    • ►  November (4)
    • ►  October (5)
    • ►  September (5)
    • ►  August (4)
    • ►  July (6)
    • ►  June (7)
    • ►  May (7)
    • ►  April (8)
    • ►  March (5)
    • ►  February (3)
    • ►  January (7)
  • ►  2011 (67)
    • ►  December (5)
    • ►  November (7)
    • ►  October (5)
    • ►  September (4)
    • ►  August (8)
    • ►  July (3)
    • ►  June (8)
    • ►  May (3)
    • ►  April (1)
    • ►  March (6)
    • ►  February (6)
    • ►  January (11)
  • ►  2010 (100)
    • ►  December (8)
    • ►  November (7)
    • ►  October (5)
    • ►  September (10)
    • ►  August (7)
    • ►  July (11)
    • ►  June (12)
    • ►  May (6)
    • ►  April (8)
    • ►  March (10)
    • ►  February (5)
    • ►  January (11)
  • ►  2009 (51)
    • ►  December (9)
    • ►  November (6)
    • ►  October (21)
    • ►  September (13)
    • ►  August (2)
  • ►  2003 (3)
    • ►  October (1)
    • ►  January (2)
  • ►  2002 (9)
    • ►  December (1)
    • ►  June (3)
    • ►  April (1)
    • ►  March (3)
    • ►  January (1)
  • ►  2001 (1)
    • ►  February (1)
  • ►  2000 (4)
    • ►  October (1)
    • ►  July (1)
    • ►  June (1)
    • ►  January (1)
  • ►  1999 (7)
    • ►  November (1)
    • ►  September (2)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
Powered by Blogger.

About Me

Unknown
View my complete profile