Detect Metro UI Version of IE

Question

What\'s the fastest method, to detect User-Agent as metro UI version of internet-explorer >=10 ?

Answer 1

Reliable Modern/Metro detection!

I have found a way to detect Modern versus Desktop which you can try here: http://jsbin.com/genac/2 (edit using Chrome or Firefox not IE http://jsbin.com/genac/2/edit).

It seems to be a fairly robust detection because:

• it works even if pinch-zoomed
• it works even if two windows snapped side by side on Modern(Metro)
• it works even if page zoomed using ctrl-+ and ctrl--
• it works even if desktop is fullscreen using F11 key on Desktop (autohiding taskbar)

The trick is that the page scrollbars on Modern do not make the client window size smaller (they appear above the page), but the page scrollbars on Desktop do affect client window size (usable window size is smaller).

The main downside is that the test requires that you have a scrollbar on the page to sniff the difference. Does the same difference in scrollbars happen in an iframe or autoscrollable div?

Edit: I would test that the browser is IE11 before using this code, because Windows 10 doesn't have Metro/Modern and Edge acts slightly differently.

You can look at page/window dimensions using: http://jsbin.com/AbimiQup/10 (edit using Chrome or Firefox not IE http://jsbin.com/AbimiQup/10/edit)

PS: There might be some way to sniff the scrollbar difference from the runtimeStyle for body or document.documentElement because maybe -ms-overflow-style: -ms-autohiding-scrollbar is used (e.g. document.documentElement.runtimeStyle.msOverflowStyle) but I couldn't find anything.

PPS: The ActiveX method given in other answers is not particularly reliable (e.g. users can disable) and it causes UI uglyness because in IE11 it shows a "ActiveX" icon next to the url.