В современном мире большое количество различных форм-факторов устройств. Игнорировать этот факт с каждым днем становится все сложнее. Поэтому для адаптации содержимого веб-страниц используют “резиновую” сетку на странице в совокупности с медиа-запросами. Это принятно называть отзывчивым веб-дизайном. Большое количество сайтов с отзывчивым дизайном представлено на сайте http://mediaqueri.es/.

К сожалению, не все так гладко в высокотехнологичном мире. Так, например, если мы откроем сайт с медиа-запросами в Windows RT (Internet Explorer Metro mode) и прикрепим окно к краю экрана (snapped mode), то медиа-запросы не сработают, а сайт будет представлен в уменьшенном виде. Логично было бы предположить, что медиа-запросы должны срабатывать и в этом случае, а сайт изменять свой вид. Давайте посмотрим, как можно исправить это недоразумение.

Отзывчивый дизайн

Основная идея отзывчивых веб-сайтов – использование резиновой сетки (когда содержимое растягивается по ширине окна, а ширина элементов задается в процентах) и использовании медиа-запросов. Медиа-запросы позволяют включать и отключать различные стили, в зависимости от ширины контейнера.

Для определения медиа-запроса в CSS-документе используется следующий селектор:

@media only screen and (max-width : 600px)
{
}

После применения такого селектора, сайт может выглядеть по-разному в различных форматах:

Чтобы заставить медиа-запросы работать на мобильных устройствах с большим разрешением, задаются параметры viewport, которые говорят о том, что размер страницы устанавливается на основе ширины устройства:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Теперь наша страница готова для того, чтобы адаптироваться к различным размерам экранов.

Суть проблемы

Как уже упоминалось выше, если мы прикрепим браузер Windows RT к краю экрана, то несмотря на небольшую ширину окна браузера, медиа-запросы работать не будут. В итоге мы увидим сайт, на котором достаточно трудно разглядеть даже заголовки:

Как видно, браузер просто игнорирует медиа-запросы и отображает документ так, как будто его просматривают на полный экран. Нехорошо.

Чтобы исправить это поведение, в CSS нужно добавить специальное правило, которое указывает на то, что в таких случаях страницу нужно отображать с меньшей шириной:

@media only screen and (max-width : 320px)
{
    @-ms-viewport
    {
        width: 320px;
    }
}

Добавим это правило в CSS-документ и обновим страницу. Результат:

Костыль? Да. Но оставлять без внимания пользователей Windows 8 тоже нельзя. Поэтому адаптируйте ваши сайты и под Internet Explorer в snapped-режиме.