Dlaczego potrzebujemy na stronie meta tagu viewport?

Współczesne strony internetowe muszą odpowiednio wyświetlać się na różnych urządzeniach mobilnych, od tabletów po smartfony. Aby osiągnąć taki efekt, powinniśmy zamieścić na naszej stronie meta tag viewport, który będzie informował silniki przeglądarek mobilnych o tym jak poprawnie wyświetlać treść.  Bez tej informacji, teksty i elementy interfejsu na urządzeniach mobilnych będą dla użytkownika zbyt małe, co znacznie utrudni mu korzystanie z naszej strony.

Czym właściwie jest viewport? 

W kontekście tworzenia stron internetowych viewport odnosi się do obszaru na ekranie przeglądarki internetowej, w którym wyświetlane są treści. Przestrzeń ta nie jest tożsama z rozmiarem strony, ponieważ viewport nie uwzględnia scrollbarów, które dodaje domyślnie przeglądarka, gdy treść przekracza rozmiar viewportu.

W artykule jako przykład będzie nam służył iPhone 12 Pro, którego viewport wynosi 390px × 844px. Oznacza to, że jeśli dodamy na stronie element, którego szerokość będzie wynosiła 500px, to strona nam się rozjedzie i treść wyjdzie poza obszar viewportu.

Rozmiar viewportu a rozdzielczość ekranu

W tym momencie może pojawić się pytanie: jeżeli rozdzielczość iPhona 12 Pro to 1170px × 2532px, to dlaczego rozmiar viewportu nie jest taki sam? 

Problem wynika stąd,  że nowe smartfony coraz częściej posiadają wysokie rozdzielczości (nawet do 1920px × 1080px), co sprawia, że na małym ekranie smartfona jest duże zagęszczenie pikseli. To z kolei będzie powodować, że elementy strony w przeglądarce będą zbyt małe. Z pomocą przychodzi CSS pixel ratio, który określa stosunek między liczbą pikseli na ekranie urządzenia (piksele fizyczne) a liczbą pikseli CSS (piksele logiczne), które są zdefiniowane przez przeglądarkę. Innymi słowy, jeżeli pixel ratio wynosi 3, to oznacza to, że jednemu pikselowi CSS odpowiadają trzy piksele fizyczne na ekranie urządzenia. W praktyce znaczy to tyle, że jeżeli mamy element z szerokością 100px, to na ekranie urządzenia zajmie on rzeczywistą przestrzeń 300px. 

W przypadku iPhona 12 Pro pixel ratio wynosi 3, co oznacza, że ekran o wymiarach 1170px × 2532px zostanie przeskalowany do viewportu o wymiarach 390px × 844px:

1170 / 3 = 390
2532 / 3 = 844

W rezultacie rozmiar tekstu i elementów UI będzie zbliżony do tych na urządzeniach o mniejszych rozdzielczościach, ale będą one bardziej szczegółowe i wyraziste, z powodu większego zagęszczenia pikseli. 

Jak przeglądarki mobilne wyświetlają strony?

Przeglądarki mobilne używają do renderowania stron virtual viewport, który zazwyczaj przyjmuje szerokość 980px. Jak to działa w praktyce? Najpierw przeglądarka wyrenderuje stronę na szerokości 980px, a potem skurczy ją w taki sposób, aby dopasowała się do szerokości viewportu (380px w naszym przypadku). Efekt będzie taki, że tekst i elementy UI będą bardzo małe. Oczywiście będzie to wyglądać źle, ale dzięki temu mamy zapewnioną chociaż minimalną skalowalność interfejsu. 

Nie jest to oczywiście wystarczające rozwiązanie. Aby strona była w pełni responsywna, musimy skorzystać ze wspomnianego znacznika meta, który umieszczamy w sekcji head dokumentu HTML.

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

Atrybut content może przyjmować dodatkowe parametry, ale nas interesują tutaj dwa podstawowe:

• width=device-width - ustawienie szerokości viewportu na 100% szerokości viewportu urządzenia
• initial-scale=1 - początkowa wartość powiększenia strony, gdzie wartość 1 gwarantuje optymalne powiększenie

Tak będzie wyglądał efekt z zastosowaniem meta tagu viewport:

Tekst i grafiki są teraz odpowiednio dostosowane pod względem rozmiaru do ekranu urządzania mobilnego, dzięki czemu użytkownik nie musi ich ręcznie powiększać.

Podsumowanie

Smartfony i tablety pomimo swoich małym rozmiarów są wyposażone w coraz to większe rozdzielczości ekranów. Zastosowanie znacznika meta viewport w połączeniu ze skalowaniem pixel ratio sprawia, że możemy widzieć na ekranach urządzeń mobilnych treści w odpowiednim rozmiarze dla naszego oka. Stosowanie tego rozwiązania jest absolutnym standardem w tworzeniu współczesnych stron internetowych, i myślę, że warto zapoznać się z jego działaniem.