检测 IE 的 Metro UI 版本

Question

检测 User-Agent 为metro UI 版本的internet-explorer >=10 的最快方法是什么？

Answer 1

我认为没有办法确定请求是来自 Metro 版本的 IE10 还是来自常规桌面模式版本。 Metro IE 没有唯一的 HTTP 标头或用户代理字符串来识别它。

Internet Explorer 10 User Agent Strings On Windows 8 64bit

Metro IE10 是 64 位应用程序，因此您会在用户代理字符串中看到“Win64”。普通桌面 IE10 默认为 32 位，将显示“WOW64”。您可以基于此做出有根据的猜测，但您会错误地识别选择在桌面模式下运行 64 位版本 IE10 的任何人。从该图表中可以看出，用户代理字符串是相同的。 [编辑：如 cmets 中所述，这不适用于 32 位 PC。]

我明白为什么您可能想要检测 Metro IE，但通常不鼓励这种类型的“浏览器嗅探”，因为它非常麻烦且容易出错。如果可以的话，最好使用 Modernizr 之类的东西来测试您需要的某些浏览器功能。

Answer 2

我为此花了一些时间并想出了一个办法。我想到了 IE10 Metro 中缺少的东西，Metro UI 不支持仅记录的一件事。开发者工具。好吧，那些工具在 window 对象中有对象。其中之一是“__IE_DEVTOOLBAR_​​CONSOLE_COMMAND_LINE”。

如果你做类似的事情

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

我已经在几个不同的环境中对其进行了测试，它似乎可以在大多数地方工作。我能想到的唯一问题是开发者工具是否在用户的浏览器上被某种方式禁用了。

Answer 3

我测试了以下内容并且它可以工作，可以找到一个显示此内容的 jsfiddle here。

---

这有点远，但似乎是一个明智的解决方案：

为什么不检查浏览器是否全屏¹ 并根据该调用全屏一个地铁。我的电脑上正在运行 Windows 8，所以我明天会尝试检查是否还有任何 GUI（我想我不记得了），如果有，你需要手动减去它们。诚然，这不是最漂亮的解决方案，但据我所知，不会有任何“漂亮”的解决方案，这可能被证明是一个非常可靠的 hack，因为 Metro IE 的 GUI 不能用任何工具栏更改或类似的软件（据我所知）。诚然，这可能会导致对桌面 IE 的错误识别，但即使这样也是合理的，因为全屏桌面 IE 仍会提供类似的体验。

---

¹ 给予一些东西：

if(window.innerWidth == screen.width && window.innerHeight == screen.height) {
  // metro
} else {
  // desktop
}

Answer 4

从它的声音来看，您正在寻求按照将站点固定到 Metro 内的开始屏幕的方式执行一些操作。为此，您可以使用 IE9 引入的代码检查是否可以固定站点，并且可以通过执行类似操作来完成...

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

关于here的更多信息。

来自 MSDN 上的 this post...

Windows 8 Release Preview 通过使用“开始”屏幕上的磁贴来实现固定网站。当用户单击固定网站的磁贴时，该网站会在 Windows Metro 风格 UI 环境中的 Windows Internet Explorer 10 Release Preview 中打开。

希望有帮助！

Answer 5

因此，似乎没有确定的测试来识别 Metro IE 与桌面 IE，但您似乎可以尝试使用一些不同的数据来假设它是 Metro。不幸的是，我发现的所有项目都无法通过其他设置来解释。换句话说，对于我发现的所有“功能”测试，Desktop IE 可以配置为诱使测试认为它是在 Metro 上运行的。

是否禁用 ActiveX（Metro 不允许任何 activex 内容，但桌面 IE 也可以将其设置为禁用）：

function isActivexEnabled() {
    var supported = null;        
    try {
        supported = !!new ActiveXObject("htmlfile");
    } catch (e) {
        supported = false;
    }

    return supported;
}

用户代理字符串检查（Metro 将始终在 64 位模式下运行，但不会在 32 位机器上运行，并且桌面 IE 可以配置为在 64 位模式下运行，不确定这些选项中的任何一个会如何流行）

function isWin64() {
    return navigator.platform == "Win64";
}

全屏检查（Metro 将始终处于全屏模式，但桌面 IE 也可以以全屏模式运行，但这可以作为 Metro 模式的支持证据）

function isFullScreen() {
   return (window.innerWidth == screen.width && 
           window.innerHeight == screen.height);
}

简而言之，我认为您必须尝试检查一堆功能，然后猜测，没有确定的方法。或者您可以接受 MS 不希望您这样做，并对您想要使用的功能使用功能检测。

对于那些想要尝试提供 UI 以引用包含浏览器 UI（例如指示如何固定网页）的用户，请记住，其他 Metro 应用程序可以将 IE10 Metro 浏览器嵌入为控件，因此即使您可以将浏览器识别为 Metro 与桌面，UI 也可能不是您尝试引用它的地方，因此这最终可能是一个非常棘手的情况，要在 100% 的时间里正确。因此，要么不要尝试，要么您可以尝试其他检测技术并接受您可能会显示错误 UI 的用例。

Answer 6

METRO IE 从不支持 ActiveX 或任何插件对象。基于此，以下脚本已经过测试并且工作正常。

//---------------------------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;
    }
//----------------------------------------------------------------   

Answer 7

感谢 John Rajakumar 和 Alexis Pigeon。我能够使用您的 Metro IE 检查作为基础，为 Metro 平板电脑 (MS Surface) 加载单独的 CSS 样式表。为了让我更加确定，我首先使用cssuseragent 来检测IE10，然后在最终的yepnope 测试中结合这两个测试。

var IEmetrotest = ((cssua.userAgent.ie > 9) && (metrotest()));
yepnope({
    test: IEmetrotest,
    yep : ['ie_metro.css']
    });

在 Browserstack 中对其进行了测试，它按预期工作。 （我会加分给你，但还没有足够的分数。）

// Minor revisions to isBrowserSupportPlugin() previously posted
// Renamed function to metrotest() and inverted the returned value. 
var errorName = null;
function metrotest() {
    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;
}

Answer 8

它尝试了下面的代码，它似乎可以工作。
但是，如果用户对您使用 InternetOptions->CustomLevel->ScriptActivexControlsMarkedSafeForScripting=false，它不会捕获。如果用户这样做，代码就会认为它是 Metro/Modern。
目前，通过检查操作系统、全屏和诸如此类的东西，我看不出有什么办法。

isWinModern 检查 Metro/Modern。
isWinDesktop 检查 Windows 作为桌面（=在这种情况下不是现代的）

下面的代码不保证能正常工作。

    function isWin8Modern() {
        if (!!window.ActiveXObject) {
            try {
                !!new window.ActiveXObject('htmlfile');
                return false;
            } catch (exc) {
                return true;
            }
        } else {
            return false;
        }
    }

    function isWinDesktop() {
        if (window.ActiveXObject) {
            try {
                new window.ActiveXObject('htmlfile');
                return true;
            } catch (exc) {
                return false;
            }
        } else {
            return false;
        }
    }

Answer 9

可靠的现代/地铁检测！

我找到了一种检测 Modern 与 Desktop 的方法，您可以在此处尝试：http://jsbin.com/genac/2（使用 Chrome 或 Firefox 而不是 IE http://jsbin.com/genac/2/edit 进行编辑）。

这似乎是一个相当可靠的检测，因为：

• 即使捏合缩放也能正常工作
• 即使两个窗口在 Modern(Metro) 上并排对齐，它也能正常工作
• 即使使用 ctrl-+ 和 ctrl-- 缩放页面也能正常工作
• 即使桌面全屏使用桌面上的 F11 键（自动隐藏任务栏）也能正常工作

诀窍在于 Modern 上的页面滚动条不会使客户端窗口大小变小（它们显示在页面上方），但 Desktop 上的页面滚动条确实会影响客户端窗口大小（可用窗口大小更小）。

主要的缺点是测试要求您在页面上有一个滚动条来嗅探差异。滚动条的相同差异是否发生在 iframe 或可自动滚动的 div 中？

编辑：在使用此代码之前，我会测试浏览器是否为 IE11，因为 Windows 10 没有 Metro/Modern 并且 Edge 的行为略有不同。

<!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>

您可以使用以下方法查看页面/窗口尺寸：http://jsbin.com/AbimiQup/10（使用 Chrome 或 Firefox 而非 IE http://jsbin.com/AbimiQup/10/edit 进行编辑）

PS：可能有一些方法可以从 runtimeStyle 嗅探 body 或 document.documentElement 的滚动条差异，因为可能使用了 -ms-overflow-style: -ms-autohiding-scrollbar（例如 document.documentElement.runtimeStyle.msOverflowStyle ) 但我找不到任何东西。

PPS：其他答案中给出的 ActiveX 方法不是特别可靠（例如用户可以禁用），并且会导致 UI 丑陋，因为在 IE11 中它会在 url 旁边显示一个“ActiveX”图标。

Answer 10

这是一个一致的方法，没有 ActiveX 检查依赖项，在 IE10 和 IE11 中进行了测试特别是。

if (window.screenY === 0 && (window.innerHeight+1) !== window.outerHeight){ //IE metro/modern UI }

第一条规则检测 IE 的全屏或现代视图（在 IEMobile 上可能是也可能是真的）。 最大化模式在历史上总是与正或负 screenX 和 screenY 相关联。

最后一条规则排除了 [全屏/F11] 模式，由于某种原因，在 IE10/Win8 和 IE11/Win8.1 上测试时，outerHeight 和 innerHeight 之间不断显示 1px 的差异

PS：我自愿不声明window.screenX === 0。仅使用 screenY 以在捕捉模式下覆盖 Modern/Metro，窗口上下文捕捉到右侧（即 screenX !== 0）。

Answer 11

var _ua = window.navigator.userAgent;
var isIDevice = (/iphone|ipod|ipad/i).test(_ua);
var isMobileChrome = (_ua.indexOf('Android') > -1 && (/Chrome\/[.0-9]*/).test(_ua) && _ua.indexOf("Version") == -1);
var isMobileIE = _ua.indexOf('Windows Phone') > -1;
function isActivexEnabled()
{
    var supported = null;        
    try
    {
        supported = !!new ActiveXObject("htmlfile");
    } 
    catch (e) 
    {
        supported = false;
    }
    return supported;
}
if (!isIDevice && !isMobileChrome && !isMobileIE &&  _ua.toLowerCase().indexOf("wow") == -1 && !isActivexEnabled())
{ 
    //IE Metro UI
}

这项工作适合我..