检测IE的Metro UI版本

时间：2012-01-05 23:34:09

标签： javascript internet-explorer browser windows-8 microsoft-metro

检测User-Agent作为 >=10的用户界面版本的最快方法是什么？

11 个答案:

答案 0 :(得分：14)

因此，似乎没有确定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位机器上运行，并且Desktop IE可以配置为以64位模式运行，并且不确定这些选项的受欢迎程度如何）< / p> 

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％正确使用。所以，或者，不要尝试，或者你可以尝试其他检测技术，并接受有用例，你可能会显示错误的用户界面。

答案 1 :(得分：9)

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

Internet Explorer 10 User Agent Strings On Windows 8 64bit

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

我可以看到为什么你可能想要检测Metro IE，但是这种类型的“浏览器嗅探”通常是不鼓励的，因为它太麻烦且容易出错。如果可以的话，最好使用Modernizr等功能对您需要的某些浏览器功能进行测试。

答案 2 :(得分：4)

感谢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;
}

答案 3 :(得分：1)

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

答案 4 :(得分：1)

可靠的现代/地铁检测！

我找到了一种检测Modern vs. Desktop的方法，你可以在这里试试：http://jsbin.com/genac/2（使用Chrome或Firefox编辑而不是IE http://jsbin.com/genac/2/edit）。

这似乎是一个相当强大的检测因为：

  • 即使捏缩放也能正常工作
  • 即使两个窗户在Modern（Metro）
    • 上并排拍摄也能正常工作
  • 即使使用ctrl- +和ctrl -
    • 进行页面缩放也能正常工作
  • 即使使用桌面上的F11键（自动隐藏任务栏）
    • ，桌面全屏也可以

诀窍是Modern上的页面滚动条不会使客户端窗口大小变小（它们出现在页面上方），但桌面上的页面滚动条会影响客户端窗口大小（可用窗口大小更小）。

主要缺点是测试要求您在页面上有一个滚动条来嗅探差异。滚动条中的相同差异是出现在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：可能有某种方法可以从bodyStyle为body或document.documentElement嗅探滚动条差异，因为可能使用-ms-overflow-style：-ms-autohiding-scrollbar（例如document.documentElement.runtimeStyle.msOverflowStyle ）但我找不到任何东西。

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

答案 5 :(得分：1)

这是一个一致的方法，没有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的差异< / p>

PS：我自愿不宣布window.screenX === 0。仅使用screenY以快照模式覆盖Modern / Metro，并在右侧捕捉窗口上下文（即screenX！== 0）。

答案 6 :(得分：0)

我对以下内容进行了测试，并且可行，这是一个显示可以找到{jsfiddle}的here。

这是一个长镜头，但似乎是一个明智的解决方案：

为什么不检查浏览器是否全屏 1 并且根据该呼叫全屏一个地铁。我工作时计算机上运行的是Windows 8，所以我会在明天检查是否还有任何GUI（不要以为我记得有），如果有的话，你需要手动减去它们。确实，这不是最美丽的解决方案，但据我所知，不会有任何“漂亮”的解决方案，这可能被证明是一个非常可靠的黑客，因为任何工具栏都无法改变地铁IE的GUI或类似的软件（据我所知）。没错，它可能导致对桌面IE的错误识别，但即便如此，因为全屏桌面IE仍然会提供类似的体验。

1 提供以下内容：

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

答案 7 :(得分：0)

通过它的声音，您希望按照将网站固定到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中打开。

希望有所帮助！

答案 8 :(得分：0)

它尝试了下面的代码，它似乎工作。
如果用户使用InternetOptions-＆gt; CustomLevel-＆gt; ScriptActivexControlsMarkedSafeForScripting = false，则无法捕获。如果用户这样做，则代码认为它是Metro / Modern 目前，通过检查操作系统，FullScreen等等，我看不到这一点。

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

答案 9 :(得分：0)

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
}

这为我工作..

答案 10 :(得分：-2)

我花了一些时间在这上面并想出办法。我想到了IE10 Metro中缺少的东西，Metro UI中只支持一件记录的东西。开发人员工具。那些工具在window对象中有对象。其中一个是＆＃34; __ IE_DEVTOOLBAR_​​CONSOLE_COMMAND_LINE＆＃34;。

如果您执行类似

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

我已经在几个不同的环境中对它进行了测试，它似乎适用于大多数地方。我能想到的唯一打嗝是如果用户的浏览器以某种方式禁用了开发人员工具。

相关问题
最新问题