По мере того, как число пользователей мобильных телефонов в Интернете увеличивается, для веб-дизайнеров становится все более важным размещать контент так, чтобы он хорошо работал на экранах различных размеров. Адаптивный веб-дизайн, первоначально определенный Итаном Маркоттом в книге «A List Apart» , представляет собой стратегию дизайна, которая реагирует на потребности пользователей и возможности их устройств путем изменения макета сайта в соответствии с используемым устройством. Например, адаптивный сайт может отображать контент в виде одного столбца на телефоне, двух столбцов на планшете и трех или четырех столбцов на настольном компьютере.
Поскольку устройства с выходом в Интернет имеют очень много возможных размеров экрана, важно, чтобы ваш сайт адаптировался к любому существующему или будущему размеру экрана. Современный адаптивный дизайн также учитывает такие способы взаимодействия, как сенсорные экраны. Цель — оптимизировать опыт для всех.
Установите область просмотра
Страницы, оптимизированные для различных устройств, должны включать метатег области просмотра в заголовке документа. Этот тег сообщает браузеру, как управлять размерами и масштабированием страницы.
Чтобы обеспечить максимальное удобство, мобильные браузеры отображают страницу по ширине экрана настольного компьютера (обычно около 980px , хотя это зависит от устройства), а затем пытаются улучшить внешний вид контента, увеличивая размеры шрифта и масштабируя контент в соответствии с размером экрана. Это может привести к тому, что шрифты будут выглядеть непоследовательно, и пользователям придется увеличивать масштаб, чтобы увидеть контент и взаимодействовать с ним.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Использование мета-значения области просмотра width=device-width указывает странице соответствовать ширине экрана в аппаратно-независимых пикселях (DIP), стандартной единице визуального пикселя (которая может состоять из множества физических пикселей на экране с высокой плотностью). Это позволяет перекомпоновать содержимое страницы в соответствии с различными размерами экрана.
Некоторые браузеры сохраняют постоянную ширину страницы при повороте в альбомный режим и масштабируют ее до заполнения экрана вместо перекомпоновки. Добавление значения initial-scale=1 сообщает браузерам установить соотношение 1:1 между пикселями CSS и пикселями, независимыми от устройства, независимо от ориентации устройства, позволяя странице использовать всю ширину альбомной ориентации.
Аудит Lighthouse не имеет тега <meta name="viewport"> с width или initial-scale может помочь вам автоматизировать процесс проверки правильности использования метатега области просмотра в ваших HTML-документах.
Размер содержимого в области просмотра
Как на настольных, так и на мобильных устройствах пользователи привыкли прокручивать веб-сайты вертикально, а не горизонтально. Принуждение пользователя к горизонтальной прокрутке или уменьшению масштаба для просмотра всей страницы приводит к ухудшению пользовательского опыта.
При разработке мобильного сайта с мета-тегом области просмотра часто случайно создается содержимое страницы, которое не совсем помещается в указанную область просмотра. Например, изображение, отображаемое шире области просмотра, может вызвать горизонтальную прокрутку. Чтобы предотвратить это, настройте свой контент так, чтобы он помещался в области просмотра.
Контент имеет неправильный размер для области просмотра. Аудит Lighthouse может помочь вам автоматизировать процесс обнаружения переполненного контента.
Изображения
Изображение с фиксированными размерами вызывает прокрутку страницы, если оно больше области просмотра. Мы рекомендуем присвоить всем изображениям max-width 100% , что сжимает изображения в соответствии с доступным пространством, не позволяя им растягиваться за пределы исходного размера.
В большинстве случаев это можно сделать, добавив в таблицу стилей следующее:
img {
max-width: 100%;
display: block;
}
Добавьте размеры изображения в элемент img.
Даже если вы установили max-width: 100% , мы все равно рекомендуем добавлять атрибуты width и height в теги <img> , чтобы браузер мог зарезервировать место для изображений перед их загрузкой. Это помогает предотвратить сдвиги макета .
Макет
Поскольку размеры экрана и ширина в пикселях CSS сильно различаются между устройствами (например, между телефонами и планшетами и даже между разными телефонами), контент не должен зависеть от определенной ширины области просмотра для хорошей визуализации.
Раньше для этого требовалось задавать элементы макета в процентах. Использование пиксельных измерений требует от пользователя горизонтальной прокрутки на маленьких экранах: