How do I detect narrow snap mode on Metro IE 10 on Windows 8

Question

In Windows 8, using a basic Twitter Bootstrap template, if I narrow the IE 10 desktop browser to a narrow window (See below right), it will fall back to using the width styles intended for smart phones: narrow, tall window, and very readable. However, if you snap the IE 10 Metro Browser to a narrow view (see below left), it shrinks the full page view down so it is unreadable, rather than using the narrow window styles.

This is unfortunate, and likely an unintended consequence of the Metro browser design or a bug.

Assuming it is not corrected in the final release, my question is:

1. Is there a way to determine that the page is being viewed by IE 10 Metro in snapped mode? I would prefer to do this in a Modernizr style way, testing for the behavior, rather than hard coding IE Metro, which could be a problem in the future. However, a working fix is more important at this point.

Answer 1

With help from the IEBlog post that Raymond Chen suggested in the comments above, I was able to correct the problem by adding the following CSS after the bootstrap responsive styles:

@media screen and (max-width: 320px) {
   @-ms-viewport { width: 320px; }
}

This stopped the zoom behavior in IE 10 Metro (snapped sidebar mode) and correctly displayed my view optimized for narrow screens.

One final note: The minimum width that Twitter Bootstrap templates are optimized for is 480px (likely because of iPhone). Therefore, further optimization for 320 pixels may need to be done to improve the page for Metro sidebar snap viewing.