Просмотр страниц в новом пользовательском интерфейсе Windows для разработчиков веб-страниц

В этой статье описано, чем в Windows 8 функционирование страниц в классическом браузере Internet Explorer отличается от функционирования страниц в Internet Explorer для нового пользовательского интерфейса Windows. Здесь также даны рекомендации по созданию сайтов с преимущественным сенсорным вводом. Эти рекомендации применимы к обоим способам просмотра страниц для Internet Explorer 10 и более поздних версий.

В Windows 8 имеется два способа просмотра страниц с помощью Internet Explorer 10: классический способ просмотра и новый способ просмотра Windows 8.

В обоих способах просмотра используются одни и те же базовые компоненты (сетевой стек, кэш и модуль визуализации), отправляются одинаковые строки обозревателя и участвуют одинаковые модели DOM. Разработчик может рассматривать оба способа как один браузер — Internet Explorer 10.

Элементы ActiveX и другие двоичные расширения

В способе просмотра Windows 8 не поддерживается технология Microsoft ActiveX и другие двоичные расширения. Чтобы гарантировать правильную работу сайта для всех пользователей, выбирайте такие способы взаимодействия, для которых не требуются подключаемые модули. Это будет удобно для всех пользователей, выполняющих просмотр без подключаемых модулей: для тех, кто использует способ просмотра Windows 8, кто отключил подключаемые модули с помощью команды Фильтрация ActiveX или надстройку браузера, либо тех, кто использует устройства, не поддерживающие подключаемые модули, например телефон или планшет.

Примеры решения проблем.

Вы можете улучшить взаимодействие вашего сайта с пользователями, следуя такой рекомендации: сначала проверять наличие стандартной функции, а подключаемые модули использовать только при необходимости. В следующем примере показано, как можно сначала попытаться обнаружить видео HTML5 и использовать его, а затем использовать подключаемые модули, если элемент video недоступен.


<video id="video1" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">

    <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

        <p>Please update your browser or install Flash</p>

    </object>
</video>


Подробнее о поддержке звука и видео HTML5 разными браузерами, включая кодеки и субтитры, см. в разделе Практические примеры звука и видео HTML5 для разных браузеров. Многие сайты уже реализовали меры, аналогичные такому способу решения проблемы, отображая рекламу без использования подключаемых модулей; это говорит о том, что такой подход может служить практичным и масштабируемым решением.

Если ваш сайт реализует свои главные функции с помощью подключаемого модуля, воспользуйтесь следующим решением.


<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

    <video id="video1" width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">

        <p>Please update your browser or install Flash</p>

    </video>
</object>


Этот образец гарантирует, что те, у кого есть подключаемый модуль, будут использовать его, а те, у кого нет, будут взаимодействовать в стандартном режиме. Если пользователь работает с браузером без подключаемого модуля или стандартной поддержки, он может попытаться установить подключаемый модуль.

Временное решение.

Для внесения изменений на сайт может потребоваться некоторое время. Если вы хотите предложить пользователям временно просматривать ваш сайт в Internet Explorer 10 на рабочем столе, вы можете ввести на сайте тег "META" или заголовок "HTTP" и тогда браузер Windows Internet Explorer будет уведомлять пользователей и предоставлять возможность переключиться на рабочий стол.


HTTP Header
X-UA-Compatible: requiresActiveX=true
META TAG
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>


Примечание  Следует помнить о том, что пользователь может работать с устройством, например с телефоном, на котором существующие элементы ActiveX не работают даже в классическом браузере Internet Explorer. Кроме того, некоторые из этих устройств могут иметь маленький экран и только сенсорный ввод, при котором элементы ActiveX или привычные функции обзора в классическом браузере могут работать неправильно. Заставлять пользователей переключаться в режим рабочего стола можно только в крайнем случае, когда нет возможности подобрать аналогичное содержимое на замену.

Устранение неполадок при просмотре страниц с новым пользовательским интерфейсом Windows

Различие в поведении сайтов при использовании разных способов просмотра заключается только в поддержке подключаемых модулей. Если вы хотите эмулировать работу без подключаемых модулей на рабочем столе для отладки сайта с помощью средств разработчика F12, включите функцию Фильтрация ActiveX ( ""Сервис"->"Безопасность"->"Фильтрация ActiveX"").

Если вы обнаружите другие различия в работе сайтов, сообщите обо всех проблемах в службу Connect.

Создание сайтов с преимущественным сенсорным вводом

Internet Explorer 10 в Windows 8 является первым браузером, позволяющим пользователям выбирать разные способы и устройства ввода: касания, перо или мышь. Пользователи, просматривающие ваш сайт в Internet Explorer 10, могут иметь такие устройства ввода. Интерфейс Windows 8 адаптирован для работы с сенсорными устройствами ввода, но некоторые пользователи по-прежнему предпочитают мышь и клавиатуру, а другим нравится использовать касания в привычном классическом интерфейсе.

Очень важно не ограничивать пользователя в выборе способов ввода. Выполняйте обнаружение функций, чтобы узнать, какое устройство доступно.

Обнаружение сенсорного ввода

Следующий пример позволяет приложению определить, сможет оно обеспечить работу с сенсорным устройством или нет.


if (window.navigator.maxTouchPoints) {
        // user has touch hardware
    }
    else {
        // user does not have touch hardware
    }


Если вы хотите узнать количество имеющихся точек касания, например когда в игре требуется минимум три таких точки, измените код обнаружения следующим образом.


    if (window.navigator.maxTouchPoints >= 3) {
        // user has at least three touch points 
    }
    else if (window.navigator.maxTouchPoints) {
        // user has only one or two touch points
    }
    else {
        // user does not have touch hardware
    }


Связанные разделы

Подготовьтесь к просмотру без помощи подключаемых модулей

 

 

Показ:
© 2014 Microsoft