How to detect narrow binding mode on Metro IE 10 on Windows 8

Question

In Windows 8, using the basic Twitter Bootstrap template, if I judge the IE 10 desktop browser in a narrow window (see below to the right), it will return to using the width styles designed for smartphones: narrow, tall, and very readable. However, if you bind the IE 10 Metro browser to a narrow view (see below on the left), it reduces the full page view down, so it is not readable, and does not use narrow window styles.

This is unfortunate and probably an unintended consequence of the Metro browser design or error.

Assuming this is not fixed in the final version, my question is:

• Is there a way to determine if a page is being viewed by IE 10 Metro in anchor mode? I would prefer to do this in a modern style, testing the behavior, rather than hard-coding IE Metro, which may be a problem in the future. However, at this stage, a working fix is ​​more important.

Answer 1

Using the IEBlog post Raymond Chen suggested in the comments above, I was able to fix the problem by adding the following CSS after the bootstrap styles:

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

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

One final note: The minimum width at which Twitter Bootstrap templates are optimized is 480 pixels (probably due to the iPhone). Therefore, you may need additional optimization for 320 pixels to improve the Metro sidebar snap preview page.

Answer 2

I recently came up with a solution. It is based on JavaScript and validates behavior as requested.

http://menacingcloud.com/?c=targetSnapMode

Combined with the @viewport ad, it makes effective combos.

@ - ms-viewport {width: device-width; } @viewport {width: device-width; }

The above @viewport ad is discussed at http://menacingcloud.com/?c=cssViewportOrMetaTag

Hope that helps :)