web-dev-qa-db-ja.com

IEのMetroUIバージョンを検出する

User-Agentを metro UIバージョンの internet-Explorer>=10として検出するための最速の方法は何ですか？

javascriptinternet-explorerbrowserwindows-8microsoft-metro
21
mate64

したがって、Metro IE vs Desktop IEを識別するための決定的なテストはないようですが、それを想定するために使用できるいくつかの異なるデータがあるようです。残念ながら、私が見つけた項目のどれも他の設定で説明することはできません。言い換えれば、私が見つけたすべての「機能」テストについて、デスクトップ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";
}

フルスクリーンチェック（メトロは常にフルスクリーンモードになりますが、デスクトップIEはフルスクリーンモードでも実行できますが、メトロモードの裏付けとなる証拠として使用できます）

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

要するに、あなたはたくさんの機能をチェックすることを試みなければならないと思います、そしてそれから推測します、決定的な方法はありません。または、MSがこれを実行することを望まないことを受け入れ、使用する機能に対して機能検出を使用することもできます。

含まれているブラウザーUIを参照するUIを提供しようとする場合（たとえば、Webページを固定する方法を示すため）、他のMetroアプリがIE10Metroブラウザーをコントロールとして埋め込むことができることに注意してください。ブラウザをMetroとデスクトップとして識別できる場合、UIは参照しようとする場所にない可能性があるため、100％の確率で正しく動作させるには、かなり難しい状況になる可能性があります。したがって、試さないでください。そうしないと、他の検出手法を試して、間違ったUIを表示する可能性のあるユースケースがあることを受け入れることができます。

14
Bert Lamb

リクエストがIE10のMetroバージョンからのものか通常のデスクトップモードバージョンからのものかを判断する方法はないと思います。 Metro IEには、それを識別するための一意のHTTPヘッダーまたはユーザーエージェント文字列がありません。

Windows 864ビットのInternetExplorer 10ユーザーエージェント文字列

Metro IE10は64ビットアプリケーションであるため、ユーザーエージェント文字列に「Win64」と表示されます。通常のデスクトップIE10は、デフォルトで32ビットであり、「WOW64」と表示されます。これに基づいて知識に基づいた推測を行うこともできますが、64ビットバージョンのIE10をデスクトップモードで実行することを選択した人を誤って特定することになります。そのグラフからわかるように、ユーザーエージェント文字列は同じです。 [編集：コメントに記載されているように、これは32ビットPCでは機能しません。]

Metro IEを検出する理由はわかりましたが、このタイプの「ブラウザスニッフィング」は非常に面倒でエラーが発生しやすいため、一般的には推奨されていません。可能であれば、 Modernizr のようなものを使用して、必要な特定のブラウザ機能の機能テストを行うのが最善です。

9
Kurt Schindler

JohnRajakumarとAlexisPigeonに感謝します。私はあなたの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;
}
4
Thor

これは、IE10およびIE11でテストされたActiveXチェックの依存関係のない一貫したメソッドです具体的には。

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のみを使用して、ウィンドウコンテキストが右にスナップされたスナップモード（つまり、screenX！== 0）でModern/Metroをカバーします。

1
hexalys

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;
    }
//----------------------------------------------------------------
1
John Rajakumar

信頼性の高いモダン/メトロ検出！

ここで試すことができるモダンとデスクトップを検出する方法を見つけました： http://jsbin.com/genac/2 （ChromeまたはFirefoxではなくIE http://jsbin.com/genac/2/edit ）。

次の理由により、かなり堅牢な検出のようです。

  • ピンチズームしても機能します
  • modern（Metro）で2つのウィンドウを並べてスナップしても機能します
  • ctrl- +およびctrl--を使用してページをズームした場合でも機能します
  • デスクトップのF11キーを使用してデスクトップがフルスクリーンであっても機能します（タスクバーの自動非表示）

秘訣は、Modernのページスクロールバーはクライアントウィンドウサイズを小さくしませんが（ページの上に表示されます）、デスクトップのページスクロールバーはクライアントウィンドウサイズに影響します（使用可能なウィンドウサイズは小さくなります）。

主な欠点は、テストでは、違いを嗅ぐためにページにスクロールバーが必要なことです。スクロールバーの同じ違いは、iframeまたは自動スクロール可能なdivでも発生しますか？

編集：このコードを使用する前に、ブラウザーがIE11であることをテストします。これは、Windows10には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/1 （ChromeまたはFirefoxではなくIE http://jsbin.com/AbimiQup/10/edit ）

PS：-ms-overflow-style：-ms-autohiding-scrollbarが使用されているため（例：document.documentElement.runtimeStyle.msOverflowStyle）、bodyまたはdocument.documentElementのruntimeStyleとスクロールバーの違いをスニッフィングする方法があるかもしれませんが、私は何も見つかりませんでした。

PPS：他の回答で示されているActiveXメソッドは特に信頼性が高くなく（たとえば、ユーザーが無効にできる）、IE11ではURLの横に「ActiveX」アイコンが表示されるため、UIが見苦しくなります。

1
robocat

以下のコードを試してみましたが、動作しているようです。
ユーザーがInternetOptions-> CustomLevel-> ScriptActivexControlsMarkedSafeForScripting = falseを選択してもキャッチされません。ユーザーがこれを行うと、コードはそれがメトロ/モダンであると信じます。
現在、OSやフルスクリーンなどをチェックしても、これを回避する方法はありません。

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

私のためのこの仕事..

0
DeltaFoX

私は以下をテストしました、そしてそれは動作します、これを示すjsfiddleは ここ を見つけることができます。

これは少し長いショットですが、かなり賢明な解決策のようです。

ブラウザがフルスクリーンかどうかを確認してみませんか1 それに応じて、フルスクリーンの1つのメトロを呼び出します。仕事中のコンピューターでWindows8を実行しているので、明日、GUIがまだ残っているかどうかを確認します（覚えていないと思います）。ある場合は、手動で減算する必要があります。確かに、これは最も美しいソリューションではありませんが、私が知る限り、「美しい」ソリューションは存在せず、metro IEのGUIのように、これはかなり堅実なハックであることがわかります。 =ツールバーや同様のソフトウェアで変更することはできません（私が知る限り）。確かに、デスクトップIEの誤認につながる可能性がありますが、それでもフルスクリーンデスクトップとしては理にかなっていますIEでも同様のエクスペリエンスが得られます。

1 次の線に沿って何かを与える：

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

それの音によって、あなたはメトロ内のスタート画面にサイトを固定するという線に沿って何かをしようとしています。これを行うには、IE9で導入されたこのコードを使用してサイトを固定できるかどうかを確認し、次のような操作を行うことができます...

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

それに関する詳細情報 ここ 。

これから この投稿 MSDNで...

Windows 8リリースプレビューは、スタート画面のタイルを使用して固定されたサイトを実装します。ユーザーが固定されたサイトのタイルをクリックすると、そのサイトがWindowsMetroスタイルのUI環境のWindowsInternet Explorer10リリースプレビューで開きます。

お役に立てば幸いです。

0
tcmorris