Rozdział 5 · Zadanie 1
Dlaczego strona musi być responsywna
Jedna linijka kodu, bez której strona wygląda na zepsutą na telefonie.
Otwórz swoją stronę «O mnie» na telefonie (albo zmniejsz okno przeglądarki na komputerze). Najprawdopodobniej tekst stanie się malutki, a karty z Flexboxa — ścisną się lub wylezą poza ekran.
Domyślnie telefon «udaje», że ma tak szeroki ekran jak komputer (ok. 980px), a potem zmniejsza wszystko, żeby się zmieściło — dlatego tekst wygląda na malutki.
Dodaj w <head> każdej strony jedną linijkę (jeśli dodawałeś już w Rozdziale 1, lekcja 10 — sprawdź, czy tam jest):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width — «używaj prawdziwej szerokości ekranu urządzenia, nie udawaj, że ekran jest szeroki». initial-scale=1.0 — «pokazuj stronę w rzeczywistej skali 1:1» bez automatycznego zmniejszania.
Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska