Современные браузеры, такие как последние версии Internet Explorer, Firefox, Safari и Opera, поддерживают свойства ширины и высоты для W3C-проекта «Черновая адаптация устройства» , который с 1 ноября превратился в черновик редактора . Это дает веб-разработчикам простой инструмент для управления автоматическим масштабированием контента по различным размерам окна. В частности, он позволяет сайтам легко адаптироваться к просмотру на планшетных устройствах с сенсорным экраном в привязанном виде и в портретной ориентации.
Автоматическое масштабирование и когда оно используется
Многие веб-сайты имеют приоритетную оптимизацию для окна шириной 1024 пикселя. Это обеспечивает удобство работы с широким спектром дисплеев, когда браузер развернут. Однако сайты могут не работать с новыми форм-факторами, такими как планшеты и книжная ориентация экрана, если они также не оптимизированы для других размеров окон . В частности, страницы часто обрезают или искажают макет при просмотре в узкой ширине.
Эта узкая схема особенно важна в Windows 8, где привязанный вид браузера находится именно в этом состоянии. Такая ситуация также возникает в портретном режиме на сланцевых устройствах из-за меньшего форм-фактора.
По умолчанию привязанный вид и портретный режим автоматически масштабируются, чтобы обеспечить ширину макета не менее 1024 пикселей. Мобильные устройства используют аналогичный подход при отображении сайтов, не оптимизированных для мобильных устройств, в узком форм-факторе. Поскольку большинство сайтов построены так, что они хорошо работают при 1024 пикселях, это гарантирует, что они хорошо размечены и по умолчанию не обрезают контент.
Хотя этот подход обеспечивает хороший опыт работы по умолчанию, пользователям необходимо увеличить масштаб для просмотра и взаимодействия с сайтом.
Хорошо работает в узком окне
Лучшие узкие макеты — те, которые были сделаны на заказ веб-разработчиком. Помимо размещения сайта в более узкой области, это также может потребовать изменения размеров изображения, изменения порядка содержимого, альтернативных инструментов навигации по сайту или других фундаментальных изменений содержимого.
Если ваш сайт уже внес эти изменения для узких окон, то можно использовать Адаптацию устройства, чтобы переопределить масштаб по умолчанию.
Для некоторых замечательных примеров адаптивных макетов, проверьте Media Queries . Metal Toad Media также предлагает отличную статью, в которой обсуждается поддержка ширины макета на основе распространенных на рынке устройств и размеров экрана.
Использование @viewport
Простая поддержка привязанного представления
Если ваш сайт уже имеет макет шириной 320 пикселей, вы можете легко выбрать эту версию в привязанном представлении. Объединение адаптации устройства с медиазапросами CSS позволяет выборочно переопределять функцию автоматического масштабирования. Этот CSS переопределяет автоматическое масштабирование по умолчанию и вместо этого обеспечивает согласованную ширину макета 320 пикселей для всех окон шириной 320 пикселей или уже:
@media screen and (max-width: 320px) { @viewport { width: 320px; } }Если ширина окна меньше 320 пикселей, содержимое будет уменьшено до размеров. Например, окно шириной 300 пикселей покажет содержимое в масштабе 93,75%. Для большей ширины применяется нормальное масштабирование (например, когда браузер находится в портретном режиме).
Адаптация устройства изящно ухудшается в браузерах, которые его еще не поддерживают. Эти браузеры могут по-прежнему получать выгоду от поддержки узкого макета — они просто не будут автоматически масштабироваться, чтобы подогнать контент к окну.
Портретная поддержка
Если ваш сайт также поддерживает макет шириной 768 пикселей, то поддержку портретного режима можно легко добавить с помощью второго правила области просмотра:
@media screen and (max-width: 320px) { @viewport { width: 320px; } } @media screen and (min-width: 768px) and (max-width: 959px) { @viewport { width: 768px; } }
Я рекомендую тестировать ваш сайт с шириной макета 768 пикселей (портрет на большинстве планшетов) и 320 пикселей (привязанный браузер) в дополнение к 1024 пикселям и шире (альбомная ориентация). Вы можете увидеть пример правила вида в действии в Make it Snappy! демо на сайте IE Test Drive .