Настройка viewport для мобильных устройств

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 23
Автор
Рек. время прохождения 2 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
Часто ли вы открывали сайт на телефоне и видели десктопную версию, которую приходилось увеличивать пальцами, чтобы что-то прочитать? Это происходит, когда страница не адаптирована для мобильных устройств. Основной инструмент для решения этой проблемы — специальный мета-тег viewport. Он дает браузеру четкие инструкции, как отображать страницу на маленьких экранах: какую ширину использовать, какой начальный масштаб задать и можно ли пользователю изменять этот масштаб. В этих заданиях мы пройдем путь от полного отсутствия viewport до его тонкой настройки. Вы на практике увидите, как один тег может кардинально изменить пользовательский опыт на мобильных устройствах. Мы разберем основные директивы, научимся их комбинировать и поймем, на что влияет каждый параметр.
Список тем

Добавление мета-тега

id: 37893_viewport-add-meta-tag

Для начала давайте добавим сам мета-тег, который отвечает за настройку viewport. Пока без каких-либо атрибутов. Ваша задача — вставить в секцию <head> правильное имя тега.

CSS
body {
  margin: 0;
  background-color: #e6f7ff;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  text-align: center;
  padding: 15px;
}

p {
  font-size: 18px;
  color: #005f8d;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Viewport</title>
  <input1>
</head>
<body>
  <p>Это наша стартовая страница. Пока она не оптимизирована.</p>
</body>
</html>
Для определения метаданных страницы используется тег <meta>. В данном случае его нужно вписать в указанное место без дополнительных атрибутов.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указываем имя viewport

id: 37893_viewport-add-name-attribute

Теперь браузеру нужно сообщить, что мы собираемся настраивать именно viewport. Для этого мета-тегу необходимо добавить атрибут, который определяет его 'имя'.

CSS
body {
  margin: 0;
  background-color: #e6f7ff;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  text-align: center;
  padding: 15px;
}

p {
  font-size: 18px;
  color: #005f8d;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Viewport</title>
  <meta input1="viewport">
</head>
<body>
  <p>Мы настраиваем viewport. Следующий шаг - его содержимое.</p>
</body>
</html>
Чтобы указать, что мета-тег предназначен для настройки viewport, используется атрибут `name` со значением `viewport`. Вам нужно вписать имя атрибута.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавляем атрибут content

id: 37893_viewport-add-content-attribute

Все настройки viewport записываются в один специальный атрибут. Добавьте этот атрибут в мета-тег, пока с пустым значением.

CSS
body {
  margin: 0;
  background-color: #e6f7ff;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  text-align: center;
  padding: 15px;
}

p {
  font-size: 18px;
  color: #005f8d;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Viewport</title>
  <meta name="viewport" input1="">
</head>
<body>
  <p>Скоро здесь все изменится!</p>
</body>
</html>
Все параметры для viewport указываются внутри атрибута `content`. Например: `content=""`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Задаем ширину viewport

id: 37893_viewport-width-device-width

Страница все еще выглядит маленькой, потому что браузер не знает, какую ширину использовать. Добавьте в атрибут `content` директиву, которая установит ширину viewport равной ширине экрана устройства.

CSS
body { margin: 0; font-family: sans-serif; }
.container {
  width: 320px;
  padding: 20px;
  background-color: #f0f8ff;
  border: 2px solid #add8e6;
  box-sizing: border-box;
}
p {
  margin: 0;
  font-size: 16px;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="input1">
</head>
<body>
  <div class="container">
    <p>Этот блок имеет фиксированную ширину 320px. С правильным viewport он должен занимать почти всю ширину экрана.</p>
  </div>
</body>
</html>
Чтобы установить ширину viewport равной ширине экрана устройства, используется значение `width=device-width`. Это значение нужно добавить в атрибут `content`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Начальный масштаб

id: 37893_viewport-initial-scale

Чтобы страница сразу отображалась в масштабе 100% без увеличения или уменьшения, нужно добавить еще одну директиву. Установите начальный масштаб равным 1.0.

CSS
body { margin: 0; font-family: sans-serif; }
.container {
  width: 320px;
  padding: 20px;
  background-color: #f0f8ff;
  border: 2px solid #add8e6;
  box-sizing: border-box;
}
p {
  margin: 0;
  font-size: 16px;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, input1">
</head>
<body>
  <div class="container">
    <p>Теперь установим правильный масштаб, чтобы текст был читаемым сразу.</p>
  </div>
</body>
</html>
Для установки начального масштаба используется директива `initial-scale=1.0`. Ее нужно добавить в атрибут `content` через запятую после `width=device-width`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Запрет масштабирования пользователем

id: 37893_viewport-user-scalable-no

Иногда требуется запретить пользователю изменять масштаб страницы (приближать или отдалять). Добавьте директиву, которая отключает эту возможность.

CSS
body { margin: 0; font-family: sans-serif; }
.container {
  width: 100%;
  padding: 20px;
  background-color: #fffbe6;
  border: 2px solid #ffd700;
  box-sizing: border-box;
}
p {
  margin: 0;
  font-size: 17px;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, input1">
</head>
<body>
  <div class="container">
    <p>Попробуйте изменить масштаб после выполнения кода. У вас не должно получиться.</p>
  </div>
</body>
</html>
Чтобы запретить масштабирование, используется директива `user-scalable=no`. Добавьте ее в атрибут `content`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение максимального масштаба

id: 37893_viewport-maximum-scale

Вместо полного запрета можно ограничить максимальный уровень приближения. Дополните viewport так, чтобы максимальный масштаб был равен начальному, то есть 1.0.

CSS
body { margin: 0; font-family: sans-serif; }
.container {
  width: 100%;
  padding: 20px;
  background-color: #fffbe6;
  border: 2px solid #ffd700;
  box-sizing: border-box;
}
p {
  margin: 0;
  font-size: 17px;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, input1">
</head>
<body>
  <div class="container">
    <p>Это альтернативный способ запретить увеличение масштаба.</p>
  </div>
</body>
</html>
Для ограничения максимального масштаба используется директива `maximum-scale`. Установите ее значение в `1.0`. Это даст тот же эффект, что и `user-scalable=no`, но является более современным подходом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная настройка viewport

id: 37893_viewport-full-setup

Давайте соберем все вместе. Заполните пропуски, чтобы установить ширину по размеру устройства и задать начальный масштаб равным 1.0.

CSS
body { margin: 0; font-family: sans-serif; }
.container {
  width: 100%;
  padding: 20px;
  background-color: #f0fff0;
  border: 2px solid #90ee90;
  box-sizing: border-box;
}
h1 {
  font-size: 24px;
  margin: 0 0 10px 0;
}
p {
  margin: 0;
  font-size: 16px;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="input1, input2">
</head>
<body>
  <div class="container">
    <h1>Заголовок</h1>
    <p>Это финальный пример с базовой и самой важной настройкой viewport.</p>
  </div>
</body>
</html>
Вам нужно вписать два значения: `width=device-width` и `initial-scale=1.0`. Обратите внимание на запятую между ними.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру