Viewport

Napisałeś media queries, otwierasz stronę na telefonie i widzisz miniaturkę wersji komputerowej, którą trzeba powiększać dwoma palcami. Winny nie jest CSS, tylko brak jednej linijki w sekcji head. Strona responsywna to taka, która wygląda dobrze na wszystkich urządzeniach i automatycznie dostosowuje się do różnych rozmiarów ekranu, a ta linijka jest jej fundamentem.

Czym jest viewport?

Viewport to obszar okna przeglądarki, w którym widać stronę, bez pasków i menu samej przeglądarki. Przypomina okno w ścianie świątyni: przez nie widzisz tylko fragment płaskorzeźby, a jego szerokość decyduje, ile zmieści się w kadrze.

Kiedyś tworzono specjalną wersję strony dla urządzeń mobilnych, zwykle pod adresem m.domena.com. Obecnie wszystko dzieje się za pomocą HTML i CSS w jednym dokumencie, ale telefon musi wiedzieć, że strona jest na to gotowa.

Dlaczego telefon udaje komputer?

Przeglądarki mobilne powstały w czasach, gdy strony projektowano wyłącznie na komputery. Dlatego bez dodatkowej informacji telefon renderuje stronę w wirtualnym oknie szerszym niż ekran, na przykład na 980 pikseli, a potem pomniejsza cały widok, żeby się zmieścił. Tekst robi się drobny, a warunek max-width: 768px w ogóle się nie włącza, bo strona sądzi, że ma 980 pikseli szerokości.

Znacznik meta viewport

Aby utworzyć responsywną stronę, musimy przekazać do pliku HTML informację, że strona ma być responsywna. Pierwszym krokiem będzie dodanie wewnątrz znacznika head takiej linijki:

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Atrybut name="viewport" mówi, czego dotyczy znacznik, a content przekazuje dwa ustawienia oddzielone przecinkiem. width=device-width ustawia szerokość wirtualnego okna na szerokość ekranu urządzenia, a initial-scale=1.0 ustawia początkowe powiększenie strony na 100%, bez pomniejszania. Kolejność części jest zawsze taka sama: <meta, potem name, a na końcu content z obiema wartościami.

Przed dodaniem znacznika strona wygląda na telefonie jak pomniejszony zrzut ekranu komputera. Po dodaniu tekst ma normalną wielkość, a media queries widzą prawdziwą szerokość ekranu.

Viewport a media queries

Dopiero z tym znacznikiem media queries z poprzedniej lekcji porównują warunki z prawdziwą szerokością telefonu. Weźmy nawigację, która na telefonie ma być pionowa, a od 768 pikseli pozioma:

1.navigation {
2  display: flex;
3  flex-direction: column;
4}
5
6@media (min-width: 768px) {
7  .navigation {
8    flex-direction: row;
9  }
10}

Bez znacznika viewport telefon udawałby ekran szeroki na 980 pikseli, więc warunek min-width: 768px byłby spełniony i menu stanęłoby w rzędzie. Ze znacznikiem telefon ma na przykład 390 pikseli, a menu zostaje pionowe i wygodne do klikania palcem. Tak wygląda podejście mobile-first: zaczynasz od układu dla małego ekranu i rozbudowujesz go w górę.

Szerokości do testowania

Strony nie testuje się na jednym ekranie. Najczęściej sprawdza się kilka typowych szerokości w pikselach CSS: 320 dla małego smartfona, 768 dla tabletu w pionie, 1024 dla laptopa lub tabletu w poziomie i 1440 dla komputera. Narzędzia deweloperskie przeglądarki mają tryb urządzeń, w którym przełączysz je jednym kliknięciem.

Moja rada: dodawaj znacznik viewport do każdej strony, a edytor często zrobi to za ciebie, bo szablon HTML wywoływany w VS Code wykrzyknikiem już go zawiera. Nie dopisuj natomiast user-scalable=no ani maximum-scale=1, bo blokują powiększanie, którego osoby słabowidzące potrzebują na co dzień. W kolejnej lekcji zajmiemy się kontenerami, które płynnie wypełniają dostępną szerokość.

Pamiętaj: znacznik viewport to okno w ścianie świątyni dopasowane do zwiedzającego, bo bez niego każdy telefon ogląda płaskorzeźbę z daleka.