Differentiating between IE10 desktop and metro

Question

I would like to detect when user is working with Metro vs Desktop IE10.

I've searched the web quite a lot and conclusion i've found is that there is no 100% way to find out (using code) if user is running in IE10 Metro style or Desktop style. Then i've found some site, which has a avascript detecting activeX.

will this be enough for detecting Metro vs Desktop?

The code is the following:

    <html>
<body>
<script type="text/javascript">
var myActiveX = null;
var isActiveXCapable = false;

function InitMyActiveX() {

  try {
    new ActiveXObject("");
  }
  catch (e) {
    // FF has ReferenceError here
    if (e.name == 'TypeError' || e.name == 'Error') {
      isActiveXCapable = true;
    }
  }
  try {
    myActiveX = new ActiveXObject("My.ActiveX");
  }
  catch (e) {
    myActiveX = null;
  }

  if (myActiveX != null) {
    document.getElementById("myInfo").innerHTML = myActiveX.GetSomeInfo();
  } else {

    document.getElementById("CallMyActiveX").setAttribute("disabled", "disabled");

    if (!isActiveXCapable) {
      document.getElementById("myInfo").innerHTML = "Browser does not support ActiveX";
    } else {
      document.getElementById("myInfo").innerHTML = "MyActiveX is not installed";
    }
  }
}

function DoSomething() {
InitMyActiveX();
  if (myActiveX != null) {
    var s = myActiveX.DoSomething();
    document.getElementById("myResult").innerHTML = s;
  }

}
</script>

<div id="myInfo"></div>
<input type="button" id="CallMyActiveX" value="Call me" onclick="DoSomething()"  />
<div id="myResult"></div>
</body>
</html>

When executing simply on IE10 desktop i see "MyActiveX is not installed". In firefox i get: "MyActiveX is not installed". Will i get the same result in IE10 Metro style? will this assist finding out if running in metro?

In case this is not correct and there is no way to differentiate between them, then How do i totally imitate the Metro style in IE10 desktop? how do i totaly disable activeX so it will give me same result as metro Ie10?

Thanks, Tal

Why do you want to differentiate between the two? Microsoft recommends that an app should look for a capability rather than the platform. For example, if your script does something when activeX are disabled, it should do the same regardless of whether you are running in metro or desktop, if activeX is disabled. — Aarkan, Sep 02 '12 at 15:06
I need to differentiate between them due to many reasons... the ActiveX thing is just some way i've found to differentiate between the two. Question is will this work? is this a proper way of identifying on which version do i work? — Tal, Sep 03 '12 at 06:31
That's what the point is. Why do need to differentiate? Can you give some reasons here? — Aarkan, Sep 03 '12 at 15:33
http://blog.bertlamb.com/2012/06/07/why-internet-explorer-10-metro-should-have-a-different-user-agent/ — Tal, Sep 03 '12 at 16:49
Not yet.., i gave up on this differentiation as i understand no real way for 100% ensuring that. — Tal, Nov 27 '12 at 12:34
Did you look at here http://stackoverflow.com/q/8751479/1847645 — Berkay Turancı, Feb 01 '13 at 07:43
@Aarkan, I wanna keep the stats. It's important for us to see how many users use it. Or if that doesn't cut it then... because IE10 in WindowsUI mode doesn't render the same as IE10 in Desktop mode. Let's see: App is coded to the Standards, all FF starting from FF6 render it correctly, so do Safari, Chrome, Android built-in browser, IE6-9, however IE10 in WindowsUI mode screws up. That makes me think that there's an issue with it and I would love to server different content to that client rather than changing my whole application. — JSmyth, Feb 01 '13 at 18:56

score 3 · Accepted Answer · answered Feb 25 '13 at 08:52

After crawling the web for a solution to determine whether my IE10 runs as Desktop or Metro version I finally summarized all together within following function:

function checkForIE10MetroStyle() {
var result = false;
if (window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints >= 2) {
    var platF = navigator.platform;
    var cpu = navigator.cpuClass;

    if (platF.toLowerCase() == 'win64' || cpu.toLowerCase() == 'arm') {
        // both potential platforms found - now search deeper
        try {
            // IE10 Metro does not support ActiveX
            new ActiveXObject("htmlfile");
        } catch (e) {
            // finally check for fullscreen-mode
            result = (window.innerWidth == screen.width && window.innerHeight == screen.height);
        }
    }
}

return result;

}

Unfortunately there is no exact possibility to be 100% sure... But first I check for msPointerEnabled and (but this is not needed) if there are at least two "touchpoints" available. As my script will differ between a touch and a mouse-version I need this check - you may simply leave this out.

But as the IE10 also supports the msPointerEnabled I follow with the platform-string as many people suggest... combined with the CPU as the MS Surface runs a ARM. And finally the two points: ActiveX and the resolution...

But unfortunately even all these points could be simulated with a touch-capable deskop/notebook pc if you want to... Well, it's difficult to get your desktop IE10 so far but not impossible.

I would have loved it if MS would have implemented a simple property telling whether touch or not and desktop or metro... but they didn't.

Hope my code might help you?

Dear Olaf, your post is very interesting. I just tried your method on a Nokia Lumia mobile phone. Unfortunately the IF-clause within the catch block does not work. I get the following values: window.innerWidth = 1024 != screen.width = 371 and window.innerHeight = 1553 != screen.height = 619 — Windwalker, Dec 17 '13 at 08:43
Dear Windwalker, as I do not have access to a mobile with Windows Phone I can hardly say what's going on there. But due to our last work on mobile optimization in our company I could guess that your webpage may use viewport-settings which scale the window? Maybe it may be handy if you also check the user agent string for a reference to nokia? Or you simply leave it out and hope all will be correct. I've also decided sometimes that to get near the perfection is better than never reach it ;-) — OlafW, Dec 19 '13 at 12:43

score 0 · Answer 2 · answered May 02 '13 at 21:17

The functionalities of IE10 metro and IE10 desktop versions are almost the same (IE10 desktop supports plugins and IE10 metro does not). If you want that users use desktop version and they are in metro version, the best way would be to direct them to use desktop version. Considering a situation where users is in IE10 metro version and you want that he uses IE10 desktop version, he can open desktop version with 2 clicks in the navigation bar.... this would be the best way to do it opening IE10 desktop version from IE10 metro version

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

Following on from Tomaž Ščavničar's answer, it seems you can force users to use the desktop version if this helps.

This SO post has more information:

Forcing IE10 in UI/Metro to switch to desktop mode

edited May 23 '17 at 12:05

Community

1
1

answered Jun 11 '13 at 10:02

Andy

2,977
2
39
71

Differentiating between IE10 desktop and metro

3 Answers3