Определить Metro UI версию IE - PullRequest
21 голосов
/ 06 января 2012

Какой самый быстрый способ, определить User-Agent как Версия пользовательского интерфейса >=10?

Ответы [ 11 ]

14 голосов
/ 19 июня 2012

Таким образом, не существует окончательного теста для идентификации Metro IE против Desktop 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-битной машине, и DesktopIE может быть настроен для работы в 64-битном режиме, а также не уверен, насколько популярной будет любая из этих опций)

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

Полноэкранная проверка (Metro всегда будет в полноэкранном режиме, однако Desktop IE также может работатьв полноэкранном режиме, но это может быть использовано в качестве подтверждающего доказательства режима Metro)

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

Короче говоря, я думаю, что вам нужно попробовать проверить кучу функций, а затем догадаться, что нет окончательногопуть.Или вы можете просто признать, что MS не хочет, чтобы вы это делали, и использовать обнаружение функций для функций, которые вы хотите использовать.

Для тех, кто хочет попытаться предоставить пользовательский интерфейс, чтобы обратиться к содержащему пользовательский интерфейс браузера.(например, чтобы указать, как прикрепить веб-страницу), имейте в виду, что другие приложения Metro могут встраивать браузер IE10 Metro в качестве элемента управления, поэтому даже если вы можете определить браузер как Metro против рабочего стола, пользовательский интерфейс может быть не там, где вы находитесь.попытался бы сослаться на это, так что это может оказаться довольно сложной ситуацией, чтобы получить правильные 100% времени.Так что либо не пытайтесь, либо вы можете попробовать другие методы обнаружения и признать, что существуют варианты использования, при которых вы могли отображать неправильный пользовательский интерфейс.

9 голосов
/ 06 января 2012

Я не верю, что есть способ определить, поступает ли запрос от версии Metro IE10 в сравнении с версией обычного режима рабочего стола. Metro IE не имеет уникальных заголовков HTTP или строки агента пользователя, чтобы идентифицировать его по.

Строки агента пользователя Internet Explorer 10 в Windows 8 64-битная

Metro IE10 - это 64-битное приложение, поэтому в строке user-agent вы увидите «Win64». Обычный рабочий стол IE10 по умолчанию является 32-разрядным и будет отображать «WOW64». Основываясь на этом, вы могли бы сделать обоснованное предположение, но вы бы ошибочно идентифицировали любого, кто решил запустить 64-разрядную версию IE10 в режиме рабочего стола. Как видно из этой диаграммы, строки пользовательского агента идентичны. [edit: как отмечено в комментариях, это не будет работать для 32-битных ПК.]

Я мог понять, почему вы можете захотеть обнаружить Metro IE, но этот тип «перехвата браузера» обычно не рекомендуется, потому что он настолько громоздок и подвержен ошибкам. Было бы лучше, если вы можете использовать функцию тестирования для определенной функциональности браузера, которая вам требуется, используя что-то вроде Modernizr .

4 голосов
/ 28 февраля 2013

Спасибо Джон Раджакумар и Алексис Пиджен. Я смог использовать вашу проверку Metro IE в качестве основы для загрузки отдельной таблицы стилей CSS для планшетов Metro (MS Surface). Чтобы добавить немного большей уверенности, я использовал 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;
}
1 голос
/ 08 июля 2014

Вот последовательный метод, без проверки проверки ActiveX, как было проверено в IE10 и IE11 , в частности .

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

Первое правило определяет полноэкранный или современный вид IE (которыйможет или может быть правдой на IEMobile). Максимизированный режим исторически всегда ассоциируется с положительным или отрицательным screenX и screenY.

И последнее правило исключает режим [Full screen / F11], который по какой-то причине постоянно показывает расхождение в 1px между outerHeight и innerHeight, протестированные на IE10 / Win8 и IE11 / Win8.1

PS: я добровольно не объявляю window.screenX === 0.Используйте screenY только для того, чтобы покрыть Modern / Metro в режиме привязки с контекстом окна, привязанным вправо (то есть screenX! == 0).

1 голос
/ 13 февраля 2014

Надежное Современное / Метро обнаружения!

Я нашел способ обнаружения Modern vs. Desktop, который вы можете попробовать здесь: http://jsbin.com/genac/2 (редактировать, используя Chrome или Firefox, а не IE http://jsbin.com/genac/2/edit).

Это довольно надежное обнаружение, потому что:

  • работает даже при увеличении пинч
  • это работает, даже если два окна щелкнули рядом на Модерн (Метро)
  • это работает, даже если страница увеличена с помощью ctrl- + и ctrl -
  • работает, даже если рабочий стол работает в полноэкранном режиме с помощью клавиши F11 на рабочем столе (панель задач с автоматическим скрытием)

Хитрость в том, что полосы прокрутки страницы в Modern не уменьшают размер окна клиента (они отображаются над страницей), но полосы прокрутки страницы на рабочем столе влияют на размер окна клиента (используемый размер окна меньше).

Основным недостатком является то, что тест требует наличия полосы прокрутки на странице, чтобы нюхать разницу. Есть ли такая же разница в полосах прокрутки в iframe или в autoscrollable div?

Edit: я бы проверил, что браузер 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, приведенный в других ответах, не особенно надежен (например, пользователи могут отключить) и вызывает уродство пользовательского интерфейса, поскольку в IE11 рядом с URL-адресом отображается значок ActiveX.

1 голос
/ 14 сентября 2012

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;
    }
//----------------------------------------------------------------   
0 голосов
/ 27 мая 2015
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 голосов
/ 30 апреля 2013

Он опробовал приведенный ниже код и, похоже, работает.
Это не ловит, если пользователь переходит InternetOptions-> CustomLevel-> 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;
        }
    }
0 голосов
/ 14 июня 2012

Судя по звукам, вы хотите сделать что-то вроде закрепления сайта на стартовом экране в Metro. Для этого вы можете проверить, можно ли закрепить сайт с помощью этого кода, который был добавлен в IE9, и можно сделать что-то вроде этого ...

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

Подробнее об этом здесь .

С этого этого поста на MSDN ...

Windows 8 Release Preview реализует закрепленные сайты с помощью плиток на начальном экране. Когда пользователь щелкает плитку закрепленного сайта, он открывается в Windows Internet Explorer 10 Release Preview в среде пользовательского интерфейса в стиле Windows Metro.

Надеюсь, это поможет!

0 голосов
/ 14 июня 2012

Я протестировал следующее и работает , jsfiddle, показывающий это можно найти здесь .


Это немного длинно, но кажется вполне разумным решением:

Почему бы не проверить, является ли браузер полноэкранным 1 и в зависимости от этого вызывать одноэкранный полноэкранный режим. У меня на компьютере работает Windows 8, поэтому завтра я попытаюсь проверить, есть ли еще какие-либо графические интерфейсы (не думаю, что я их запомнил), и если это так, вам нужно будет вручную вычесть их. Правда, это не самое красивое решение, но, насколько я знаю, не будет никакого «красивого» решения, и это может оказаться довольно солидным взломом, поскольку графический интерфейс пользователя IE в метро нельзя изменить ни с одной панели инструментов. или подобное программное обеспечение (насколько я знаю). Правда, это может привести к ошибочной идентификации IE для настольного компьютера, но даже в этом есть причина, так как полноэкранный IE для настольного компьютера все равно будет работать аналогично.


1 Давать что-то вроде:

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