Znacznik meta viewport
Dodaj znacznik meta viewport i dowiedz się, dlaczego jest wymagany do poprawnego działania responsywnych układów na urządzeniach mobilnych.
Znacznik meta viewport to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego znacznik meta viewport?
Bez znacznika meta viewport przeglądarki mobilne renderują stronę w szerokości typowej dla komputerów (często 980px), a następnie pomniejszają ją, aby się zmieściła. W efekcie tekst staje się bardzo mały, a układy są nieprawidłowe. Znacznik meta informuje przeglądarkę, aby użyła rzeczywistej szerokości urządzenia.
Znacznik
Należy dodać go wewnątrz <head> każdej strony. Jest wymagany, aby dowolny responsywny układ działał poprawnie.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width ustawia szerokość viewportu na szerokość ekranu urządzenia w pikselach CSS. Na telefonie iPhone 14 o szerokości 390px viewport będzie miał 390px, a nie 980px.
initial-scale=1.0
initial-scale=1.0 ustawia poziom powiększenia na 1 podczas pierwszego wczytywania strony. Bez tego ustawienia niektóre przeglądarki mogą nadal zastosować współczynnik powiększenia. W połączeniu z device-width zapewnia ono rzeczywisty stosunek 1:1 pikseli CSS do pikseli urządzenia.
Piksele CSS a piksele fizyczne
Ekrany o wysokiej rozdzielczości (Retina) mają współczynnik gęstości pikseli urządzenia (DPR) większy niż 1. Telefon iPhone 14 o szerokości 390px ma 1170 pikseli fizycznych (DPR = 3). Piksele CSS abstrahują od pikseli fizycznych — kod CSS nadal działa w pikselach CSS niezależnie od wartości DPR.
Nie używaj user-scalable=no
Niektórzy programiści dodają user-scalable=no, aby wyłączyć powiększanie gestem. Nie należy tego robić. Uniemożliwia to użytkownikom z niepełnosprawnością wzroku powiększanie treści w celu jej odczytania i narusza kryterium sukcesu 1.4.4 standardu WCAG.
Jednostki viewportu: vw i vh
1vw = 1% szerokości viewportu. 1vh = 1% wysokości viewportu. 100vw i 100vh wypełniają cały viewport. Należy używać ich w sekcjach hero i układach pełnoekranowych.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — dynamiczna wysokość viewportu
Na urządzeniach mobilnych 100vh obejmuje elementy interfejsu przeglądarki (pasek adresu), co może powodować obcinanie treści. Nowsze 100dvh (dynamiczna wysokość viewportu) uwzględnia widoczne elementy interfejsu. Należy używać go wraz z wartością zastępczą.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}viewport w DevTools
W Chrome DevTools należy kliknąć ikonę urządzenia, aby włączyć tryb urządzenia i dokładnie sprawdzić wygląd strony przy różnych rozmiarach viewportu. Linijka pokazuje piksele CSS.
Warianty atrybutu content
Można również ustawić initial-scale, minimum-scale i maximum-scale. Należy zachować rozsądne wartości. Ustawienie minimum-scale=1 bez user-scalable=no nadal pozwala na powiększanie, co jest podejściem dostępnym.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Viewport a media queries
Media queries używają szerokości viewportu (wartości w pikselach CSS, a nie pikselach fizycznych). Jeśli viewport ma 390px, reguła @media (max-width: 768px) będzie spełniona. Znacznik meta viewport sprawia, że punkty przerwania działają poprawnie na urządzeniach mobilnych.
Szybkie sprawdzenie
Jaki jest cel użycia width=device-width w znaczniku meta viewport?
Podsumowanie: znacznik meta viewport
Należy zawsze umieszczać wewnątrz
. Nigdy nie należy wyłączać możliwości zmiany powiększenia. Do określania rozmiaru względem viewportu należy używać vw/vh. dvh rozwiązuje problemy powodowane przez elementy interfejsu mobilnej przeglądarki. Ten pojedynczy znacznik umożliwia poprawne działanie całego responsywnego kodu CSS na urządzeniach mobilnych.Często zadawane pytania
Czy lekcja „Znacznik meta viewport” jest bezpłatna?
Tak — pełny tekst „Znacznik meta viewport” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Znacznik meta viewport”?
Dodaj znacznik meta viewport i dowiedz się, dlaczego jest wymagany do poprawnego działania responsywnych układów na urządzeniach mobilnych. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Znacznik meta viewport”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Znacznik meta viewport
- Flexbox do tworzenia układów
- CSS Grid do tworzenia układów
- Zapytania medialne i projektowanie mobile-first