发表新帖
发表新帖

Detect Metro UI Version of IE

后端 未结
关注
11 1751
轻奢々
轻奢々 2020-12-02 21:22

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

相关标签:
11条回答
  • 我在风中等你
    2020-12-02 21:42

    I don't believe there is a way to determine if a request is coming from the Metro version of IE10 versus the regular desktop mode version. Metro IE has no unique HTTP headers or user-agent string to identify it by.

    Internet Explorer 10 User Agent Strings On Windows 8 64bit

    Metro IE10 is a 64-bit application, so you'll see "Win64" in the user-agent string. Regular desktop IE10, by default, is 32-bit and will show "WOW64". You could sort-of make an educated guess based on this, but you would falsely identify anyone who chose to run the 64-bit version of IE10 in desktop mode. As you can see from that chart, the user-agent strings are identical. [edit: as noted in the comments, this won't work for 32-bit PCs.]

    I could see why you may want to detect Metro IE, but this type of "browser sniffing" is generally discouraged because it's so cumbersome and error-prone. It would be best to feature test for certain browser functionality that you require using something like Modernizr, if you can.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-02 21:44

    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. 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
  <title>Metro width detector - robocat</title> 
  <script>
    function show() {
      var div = document.createElement('div');
      var s = [];
      s.push('IS METRO? ' + ((tester.offsetWidth == window.outerWidth) ? 'YES' : 'NO'));
      s.push('document.documentElement.clientWidth: ' + document.documentElement.clientWidth);
      s.push('document.documentElement.offsetWidth: ' + document.documentElement.offsetWidth);
      s.push('window.innerWidth: ' + window.innerWidth);
      s.push('window.outerWidth: ' + window.outerWidth);
      s.push('screen.width: ' + screen.width);
      s.push('screen.availWidth: ' + screen.availWidth);
      s.push('document.documentElement.getBoundingClientRect().width: ' + document.documentElement.getBoundingClientRect().width);
      s.push('tester.offsetWidth: ' + tester.offsetWidth);
      div.innerHTML = s.join('<br>');
      document.body.insertBefore(div, document.body.firstChild);
    }
    window.onresize = function() {
      show();
    }
  </script>
</head>
  <body onload="show()" style="margin:0">
    <div id="tester" style="position:absolute;left:0;right:0;"></div>
  <div style="height:10000px;width:10px;background-color:blue;"></div>
</body>
</html>

    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.

    0 讨论(0)
  • Happy的楠姐
    2020-12-02 21:45

    METRO IE never supports ActiveX or any plugin objects. Based on that the following script is tested & working fine.

    //---------------------------Metro IE check-------------------------
    var errorName = null;
    function isBrowserSupportPlugin() {
        var supported = null; 
        try {
            new ActiveXObject("");
        }
        catch (e) {
            // FF has ReferenceError here
            errorName = e.name; 
        }     
        try {
            supported = !!new ActiveXObject("htmlfile");
        } catch (e) {
            supported = false;
        }
        if(errorName != 'ReferenceError' && supported==false){
            supported = false;
        }else{
            supported =true;
        }
        return supported;
    }
//----------------------------------------------------------------
    0 讨论(0)
  • 耶瑟儿～
    2020-12-02 21:47

    I spent some time on this and figured out a way. I thought about what is missing from IE10 Metro and only one thing that is documented isn't supported in the Metro UI. The developer tools. Well, those tools have objects in the window object. One of these is "__IE_DEVTOOLBAR_CONSOLE_COMMAND_LINE".

    If you do something like 

    if (window.__IE_DEVTOOLBAR_CONSOLE_COMMAND_LINE)
{
    // In IE 10 Standard UI
}
else
{
    // In IE 10 Metro UI
}

    I've tested it in a few different environments and it appears to work most places. The only hiccup I can think of is if the developer tools were somehow disabled on the user's browser.

    0 讨论(0)
  • 长发绾君心
    2020-12-02 21:49

    By the sounds of it you are looking to do something along the lines of Pinning a site to the start screen within Metro. To do that you can check if a site can be pinned by using this code that was brought in with IE9 and can be done by doing something like this...

    function doChecks_Browser() {    
  // full pin abilities == can pin && Win7+    
  if (pinnedSiteDetection.hasFullPinAbilityBrowser)
}

    More info on that here.

    From this this post on MSDN...

    Windows 8 Release Preview implements pinned sites by using tiles on the Start screen. When a user clicks the tile of a pinned site, the site opens in Windows Internet Explorer 10 Release Preview in the Windows Metro style UI environment.

    Hope that helps!

    0 讨论(0)
 看不清?
提交回复
热议问题