Адаптация веб-сайта под различные размеры окна

Internet Explorer 10 в Windows 8 Release Preview поддерживает свойства ширины и высоты при адаптации для устройств CSS по рабочему черновику консорциума W3C. Это обеспечивает веб-разработчикам простое средство для управления автоматическим масштабированием контента в окнах различных размеров. В частности, это позволяет веб-сайтам легко адаптироваться под браузер Windows 8 в стиле Metro в прикрепленном представлении с книжной ориентацией.

Автоматическое масштабирование и случаи его применения

Большинство веб-сайтов имеют приоритетную оптимизацию под ширину окна 1024 пикселей. Это обеспечивает удобство просмотра на самых разных дисплеях, если окно браузера развернуто на весь экран. Однако веб-сайты могут отображаться некорректно на дисплеях новых форм-факторов, например на планшетных ПК, или при книжной ориентации, если не выполнена оптимизация под другие размеры окна. В частности, разметка страниц часто бывает урезана или искажена при просмотре в узком окне.

Снимок экрана с очень узкими окнами браузера, в которых открыты Википедия и веб-сайт TechCrunch.

Узкая разметка особенно важна в Windows 8, где прикрепленное представление браузера в стиле Metro имеет именно такой вид. Такая ситуация часто возникает при книжной ориентации на планшетах из-за малого размера форм-фактора.

В браузере в стиле Metro прикрепленное представление и книжная ориентация автоматически масштабируются по умолчанию, чтобы обеспечить ширину разметки как минимум 1024 пикселя. В мобильных устройствах с узким форм-фактором при отображении не оптимизированных для них страниц применяется похожий подход. Поскольку большинство страниц оптимизированы под ширину 1024 пикселя, они отображаются корректно, не урезая контент по умолчанию.

Википедия и веб-сайт TechCrunch в браузере Windows 8 в стиле Metro в прикрепленном представлении.

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

Эффективная работа в узком окне

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

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

Замечательные примеры адаптированных разметок можно найти на веб-сайте Media Queries. А на веб-сайте Metal Toad Media можно ознакомиться с интересной статьей, в которой обсуждается поддержка ширины разметки с учетом типов устройств и размеров экрана, преобладающих на рынке.

Использование @-ms-viewport

Простая поддержка для прикрепленного представления. Если ваш веб-сайт совместим с разметкой под ширину 320 пикселей, вы можете выбрать эту настройку для прикрепленного представления. Комбинирование адаптации устройств с медиа-запросами CSS позволяет избирательно отменять функции автоматического масштабирования. Таблица CSS отменяет автоматическое масштабирование по умолчанию, а вместо него задает последовательную ширину разметки 320 пикселей для всех окон шириной 320 пикселей или более узких:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

При ширине окна менее 320 пикселей масштаб контента будет уменьшен, чтобы в окне поместилась вся страница. Например, окно шириной 300 пикселей будет отображать контент в масштабе 93,75%. Для окон большей ширины будет применяться обычное масштабирование Internet Explorer 10 (например, когда для браузера в стиле Metro задана книжная ориентация).

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

Поддержка книжной ориентации. Если ваш веб-сайт поддерживает также разметку шириной 768 пикселей, то можно легко добавить поддержку книжной ориентации с помощью второго правила для окна просмотра:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

 

@media screen and (min-width: 768px) and (max-width: 959px) {

@-ms-viewport { width: 768px; }

}

Рекомендуем вам протестировать свой веб-сайт с шириной разметки 768 пикселей (книжная ориентация на большинстве планшетов) и 320 пикселей (браузер в стиле Metro, прикрепленное представление) в дополнение к ширине 1024 пикселя или больше (альбомная ориентация). Пример правила для окна просмотра в действии можно увидеть в демонстрационном ролике Make it Snappy! на веб-сайте тестирования Internet Explorer.

— Мэтт Ракоу (Matt Rakow), руководитель программы, Internet Explorer