В современном мире большое количество различных форм-факторов устройств. Игнорировать этот факт с каждым днем становится все сложнее. Поэтому для адаптации содержимого веб-страниц используют “резиновую” сетку на странице в совокупности с медиа-запросами. Это принятно называть отзывчивым веб-дизайном. Большое количество сайтов с отзывчивым дизайном представлено на сайте 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-режиме.