Розділ 5 · Завдання 1
Чому сайт має бути адаптивним
Один рядок коду, без якого сайт виглядає зламаним на телефоні.
Відкрий свою сторінку «Про мене» на телефоні (або зменш вікно браузера на комп’ютері до вузького). Швидше за все, текст стане крихітним, а картки з Flexbox — затісняться чи вилізуть за екран.
За замовчуванням телефон «вдає», що в нього такий самий широкий екран, як у комп’ютера (приблизно 980px), а потім зменшує все, щоб влізло — тому текст і виглядає дрібним.
Додай у <head> кожної сторінки один рядок (якщо ти вже додавав у Розділі 1, урок 10 — перевір, що він там є):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width — «використовуй справжню ширину екрана пристрою, не вдавай, що екран широкий». initial-scale=1.0 — «показуй сторінку в реальному масштабі 1:1» без автоматичного зменшення.
Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща