Выбор ответа Junior Адаптивность спрашивают часто обновлено
Зачем meta viewport
Вопрос
Сайт с медиазапросами под телефон на реальном смартфоне выглядит как уменьшенная десктопная версия. Чего скорее всего не хватает?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: <meta name="viewport" content="width=device-width, initial-scale=1". Без meta viewport мобильный браузер рисует страницу на виртуальном холсте шириной около 980px и уменьшает её, поэтому медиазапросы для узкого экрана не срабатывают.
Варианты ответа
<meta name="viewport" content="width=device-width, initial-scale=1">правильный ответ@media screen andперед каждым медиазапросом в стилях<meta name="mobile-web-app-capable" content="yes">html { width: 100vw; max-width: 100%; }в начале стилей
Разбор
Без meta viewport мобильный браузер рисует страницу на виртуальном холсте шириной около 980px и уменьшает её, поэтому медиазапросы для узкого экрана не срабатывают. Тип screen не обязателен, медиазапрос без него работает. mobile-web-app-capable относится к запуску сайта как приложения с экрана «Домой». 100vw у html ширину холста не меняет.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.