Ответ
Viewport — это видимая область веб-страницы в окне браузера. На мобильных устройствах он может отличаться от реального размера экрана, поэтому важно управлять им через метатег <meta name="viewport"> для корректного отображения контента.
Пример настройки viewport для адаптивного дизайна:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Где:
width=device-width— ширина viewport равна ширине устройстваinitial-scale=1.0— масштаб 100% при загрузке
Без правильного viewport мобильные браузеры могут показывать страницу как уменьшенную десктопную версию.
Ответ 18+ 🔞
Да ты посмотри, какой прикол-то, блядь! Вот эта вся хуйня под названием «viewport» — это, по сути, тот кусок страницы, который тебе в браузере виден. А на телефоне-то, сука, он может быть вообще другим, не как реальный экран! Поэтому если не настроить эту поебень через специальный метатег, то сайт на мобилке будет выглядеть так, будто его через микроскоп разглядывают, пиздец просто.
Вот, смотри, как обычно умные люди делают, чтобы не облажаться:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Расшифровываю для особо одарённых, ёпта:
width=device-width— это чтобы ширина этой самой видимой хуйни совпадала с шириной твоего девайса. Логично же, блядь?initial-scale=1.0— а это чтобы страница сразу загружалась в нормальном, человеческом масштабе, а не в таком, будто ты её с вертолёта рассматриваешь.
Если этот тег проёбать и не поставить, то мобильный браузер возьмёт и покажет тебе всю твою десктопную простыню, ужатую в маленькое окошко. И потом будешь гадать, почему у тебя кнопки размером с молекулу, и тыкать в них можно только стилусом, да и то с трёх попыток, ядрёна вошь!