Junior
Do czego służy viewport?
sobes.tech AI
Odpowiedź od AI
Widok (viewport) określa widoczną część strony internetowej dla użytkownika. Jest niezbędny do responsywnego projektowania, aby treść była skalowana i poprawnie wyświetlana na urządzeniach o różnych rozmiarach ekranów (smartfony, tablety, komputery stacjonarne).
Zazwyczaj jest ustawiany za pomocą tagu <meta> w sekcji <head> dokumentu HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Przyjrzyjmy się atrybutowi content:
width=device-width: Ustawia szerokość widoku na szerokość ekranu urządzenia w pikselach, niezależnie od gęstości (piksele niezależne od gęstości).initial-scale=1.0: Ustawia początkowy współczynnik powiększenia podczas ładowania strony. Wartość 1.0 zapobiega domyślnemu powiększeniu i gwarantuje, że 1 piksel CSS odpowiada 1 widocznemu pikselowi.
Bez odpowiedniej konfiguracji viewport, przeglądarki mobilne mogą wyświetlać stronę w stałym powiększeniu, nieprzeznaczonym dla małych ekranów, co prowadzi do konieczności przewijania poziomego.