Making a Great Snapped View for your Web Site on IE10 on Windows 8

One of the great features of Windows 8 Metro Applications is the Snapped View where app developers create a 320px wide view of their app.  When the user snaps their app to the left or the right of the screen they can continue using their primary app while still having the secondary app visible in a thinner view.  The project templates in Visual Studio come with this capability built-in to make it easier to address this important part of the application experience.  If you build your Metro application with HTML, you see that this is done with CSS Media Queries, a feature supported in all HTML5 modern browsers.  This is also the way that you support snapped view for your website, with the @-ms-viewport rule (since it’s Microsoft-specific today, it has the –ms- prefix and can be safely ignored by other browsers.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width snapped view goes here */

Since Mobile browsers like Windows Phone’s IE and the iPhone both report their width as 320 px, you may be able to reuse the media queries that you created for mobile for the snapped view by adding one line of css to your style sheet.  If you are intrigued by CSS Media Queries, and want to see more examples of responsive design that use them, take a look at the Media Queries site which hosts a great collection of them. 

You can also take a look at a site that I’ve been working on that uses media queries and implements the snapped mode media query at

Screenshot (5) Screenshot (4)

More details

Comments (3)
  1. Jens says:

    What Kind of poor technice to use hardcoded values

  2. Great sample. Thanks!

Comments are closed.

Skip to main content