Adapting Your Site to Different Window Sizes

IE10 in the Windows 8 Release Preview supports the width and height properties of the W3C Working Draft CSS Device Adaptation. This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular,it enables Web sites to easily adapt to Windows 8 Metro style browser in the snapped view and portrait orientation.

Auto-Scaling and When It Is Used

Most websites have prioritized optimization for a 1024 pixel wide window. This ensures a good user experience for a wide variety of displays when the browser is maximized. However, sites may not work well on new form factors like tablets and portrait screen orientation if they haven't optimized for other window sizes as well. In particular, pages often clip or distort layout when viewed in a narrow width.

TechCrunch and Wikipedia displayed in very narrow windows

This narrow layout is particularly important in Windows 8, where the snapped view of the Metro style browser is in this exact state. This situation also occurs for portrait mode on slate devices due to the smaller form factor.

In the Metro style browser, the snapped view and portrait mode are auto-scaled by default to ensure at least 1024 pixels of layout width. Mobile devices take a similar approach when displaying non-mobile-optimized sites on a narrow form factor. Since most sites are built to work well at 1024 pixels, this ensuresthat they are laid out well and do not clip content by default.

Although this approach ensures a good default experience, users will need to zoom in to view and interact with the site.

Working Well In a Narrow Window

The best narrow layouts are those that have been custom-made by the Web developer. In addition to fitting the site into a narrower region, this also may requirechanges to image sizes, reordering of content, alternative tools for site navigation, or other fundamental changes to content.

If your site has already made these modifications for narrow windows, then Device Adaptation can be used to override the default scale.

For some great examples of adaptive layouts, check out Media Queries. Metal Toad Media also has a great article discussing layout width support based on prevalent devices and screen sizes inthe market.

Using @-ms-viewport

Simple support for the snapped view. If your site is already capable of a 320 pixel width layout, you can easily choose to show that version in the snapped view. CombiningDevice Adaptation with CSS media queries allows the auto-scaling feature to be overridden selectively. This CSS overrides the default auto-scaling, and insteadenforces a consistent 320 pixel layout width for all windows 320 pixels wide or narrower:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

When the window is less than 320 pixels wide the content will be scaled down to fit. For example, a 300 pixel wide window will show the content at 93.75%scale. For larger widths, IE10’s normal scaling applies (for example, when the Metro style browser is in portrait mode).

Device adaptation degrades gracefully in browsers which do not yet support it. These browsers can still benefit from narrow layout support—they just won’t auto-scaleto fit content to the window.

Portrait support. If your site supports a 768 pixel wide layout as well, then portrait mode support can be easily added with a second viewport rule:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

@media screen and (min-width: 768px) and (max-width: 959px) {

@-ms-viewport { width: 768px; }

}

We recommend testing your site in layout widths of 768 pixels (portrait on most slates) and 320 pixels (snapped Metro style browser) in addition to 1024 pixels and wider (landscape). Youcan see an example of the viewport rule in action in the Make it Snappy! demo on the IE Test Drive site.

Does anyone else have this bug where after switching back to Metro Style IE from some other app, the frame is occasionally completely blank? The only way to bring the site back is to bring up the app bar with all the tabs and clicking or tapping on the current tab, which causes the page to reappear instantly.

It seems that you're between two tough places. Having few pixels to work with on sites that do not have responsive solution done yet and breaking the already working responsive sites. This all pain seems to come from the grand idea of getting everything (mobile, tablet, desktop) working with the almost the same look and feel (metro). These new things can cause problems, granted. It just felt like "Not again Microsoft, not again"-moment. 🙂

Mikko, the [name="viewport" content="width=device-width, initial-scale=1"] stuff in a meta tag would do exactly what this vendor-specific prefix is trying to do, which is tell the browser that the site is capable of handling a variety of screen sizes ("width=device-width"), so don't zoom it ("initial-scale=1").

So old sites that don't have that meta tag can safely be zoomed out to fit this very specific use-case (snapped view in Metro). Microsoft are simply duplicating this "signal" in CSS, which (yet again) breaks everything we've already done. BAD Microsoft! NO.

IE10 includes support for the device-width and device-height keywords within the viewport rule. For sites that support a wide variety of window sizes, these values can be used to disable autoscaling entirely. For sites that only support a subset of window sizes, it's generally a good idea to use these in conjunction with media queries to avoid over-disabling autoscaling.

@Mikko Tapionlinna:

You’ve described the challenge exactly: autoscaling works better for single-layout sites, but sites with adaptive layout need the true window size. Autoscaling by default is the right choice for the vast majority of sites on the web today, though it does mean that adaptive site authors will need to add a small amount of CSS to get this behavior in the Metro style browser.

This might be a little off-topic now, but seeing the HTML5 and JavaScript support/performance increasing in IE (and other web browsers as well), I don't really get why we should invest time in building platform-specific apps for Windows, Android, and iOS, when all this can be done in HTML5/JavaScript in a platform-independent way. I mean, seriously: Google Mail, for example. It has a decent web interface and user experience for both small and large screen sizes — so, why do we need to build three different types of apps to use it when it can be accessed unchanged on many platforms and devices just as well via your web browser? I mean, it's like building rims for four, five, or any other number of screws but the same type of tire — a vendor-specific distinction that just creates unnecessary development overhead, complexity, and incompatibility. And if we really need a separate app model, the number one requirement should be compatibility across platforms. Make it work everywhere. Windows, Android, iOS — three kinds of the same thing just because everybody wants to do his own s**t. The same is true for all these proprietary CSS additions. Stop that nonsense.

2.) Rather than waste time trying to get developers to support 4 different screen size modes for a single device !!!!! (portrait 768×1024, landscape 1024×768, landscape 2/3rds, and landscape 1/3rd) for their apps on windows 8 – why not just support true multitasking like on the PlayBook?

*if* I decide to port any of my apps to windows tablets there's no way I'm going to put up with that mess. The only real benifits to side by side app viewing would be to drag n drop between them but yet this isn't even supported.

3.) I'm not changing a single line of my web code to support metro IE. the code I serve up works in all browsers and adjusts nicely for different screen sizes. Never again will I add any IE-only code – IE only code was the downfall of the web between 2000-2010.

4.) Where's the Windows 7 version of IE10 already? I have no intentions of downgrading to Windows 8 (and I'm far from alone on this!) – if you actually want site content checked and tested in IE10 you ***NEED*** to ship a windows 7 version ASAP!!!

Guys this is a css feature not windows specific code. If you're not interested in making your site look good at small sizes (believe it or not, windows 8 is not the only situation where this might happen) ok but this isn't microsoft trying to force anything on you.

The at-media rule for the viewport is a specification proposed by Opera Software. You might want want to add the vendor prefix for Opera too and the prefix-less one so there is a fallback for the future. It is always a good practice to be inclusive and future proof.