Dokumentacja HTML z przykładami: Meta viewport

Q: Jak wygląda standardowy znacznik meta viewport?

, umieszczony w . To właściwy wybór dla prawie każdej responsywnej strony.

Q: Dlaczego mój meta viewport nie działa?

Sprawdź, czy znacznik jest w , czy name ma wartość viewport i czy wartości są oddzielone przecinkami. Jeśli strona nadal przewija się na boki, któryś element jest szerszy niż ekran, na przykład ma stałą szerokość, to duży obrazek albo długie słowo; znacznik nie naprawi CSS, który jest szerszy niż urządzenie.

Znacznik, którego należy użyć

Umieść tę linię w <head> każdej strony:

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

width=device-width sprawia, że układ jest szeroki jak ekran, a initial-scale=1 otwiera stronę przy powiększeniu 100%. Większości stron to wystarcza. Cała strona z tym znacznikiem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

Skrypt odczytuje znacznik i szerokość układu. Przeglądarki na komputerze ignorują znacznik viewport, więc w tym podglądzie szerokość to po prostu szerokość okna podglądu. Na telefonie ten sam plik podaje szerokość telefonu (zwykle od 360 do 430 pikseli CSS) właśnie dzięki znacznikowi.

Co robią telefony bez niego

Przeglądarka mobilna, która nie znajdzie znacznika viewport, zakłada, że strona powstała z myślą o komputerze. Układa ją na szerokość około 980 pikseli, a potem zmniejsza całość, żeby zmieściła się na ekranie. Dwa atrapowe telefony poniżej wczytują tę samą stronę, jeden ułożoną na 980px, drugi na szerokość telefonu, oba przeskalowane do tego samego rozmiaru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

Na pierwszym telefonie tekst o wielkości 16px robi się malutki i czytelnik musi powiększać go palcami. Na drugim pozostaje czytelny, a kolumny układają się jedna pod drugą, bo pasuje reguła @media (max-width: 600px). To druga rola znacznika: media queries widzą szerokość układu, więc bez znacznika telefon zgłasza 980px, a twoje style mobilne nigdy się nie włączają. Zmień 375 na 980 w show('with', 375), a oba telefony będą wyglądać tak samo.

Znacznik to połowa pracy

Znacznik viewport daje wąski układ; twój CSS musi się w nim zmieścić. Jeden element o stałej szerokości większej niż ekran sprawia, że cała strona przewija się na boki:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

Pierwsze pole przewija się na boki; drugie zmniejsza się, żeby się zmieścić. Nadaj obrazkom i innym szerokim elementom max-width: 100% i wybieraj elastyczne szerokości (procenty, fr, flexbox) zamiast stałych szerokości w pikselach.

Wartości viewport

Wartość	Przykład	Co robi
`width`	`width=device-width`	Szerokość układu. `device-width` to szerokość ekranu w pikselach CSS; liczba też jest dozwolona, ale rzadko to dobry pomysł.
`initial-scale`	`initial-scale=1`	Poziom powiększenia przy otwarciu strony.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Limity powiększania. Niskie maksimum blokuje zoom, więc pomiń `maximum-scale`.
`user-scalable`	`user-scalable=yes`	Czy dozwolone jest powiększanie palcami. Pomiń tę wartość.
`viewport-fit`	`viewport-fit=cover`	Pozwala stronie sięgać pod notch lub zaokrąglone rogi, razem z paddingiem `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Jak klawiatura ekranowa wpływa na układ. Obsługiwane przez Chrome na Androidzie.

Wartości oddziela się przecinkami. Strona, która na telefonach z notchem wypełnia cały ekran, wygląda tak:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Nie blokuj powiększania

W starszych szablonach znajdziesz taki znacznik:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Blokuje powiększanie palcami, od którego zależą osoby ze słabym wzrokiem, a narzędzia do sprawdzania dostępności, takie jak Lighthouse, oznaczają go jako błąd. Safari na iOS ignoruje user-scalable=no, więc znacznik nawet nie działa konsekwentnie. Jeśli pole formularza powiększa się po dotknięciu na iPhonie, przyczyną jest rozmiar czcionki w polu poniżej 16px; ustaw font-size pola na co najmniej 16px, zamiast wyłączać zoom.

Częste błędy

Brak znacznika. Responsywny arkusz stylów nic nie daje na telefonach bez niego, bo media queries widzą układ o szerokości 980px. Umieść go obok znacznika title w szablonie strony.
Średniki między wartościami. Używaj przecinków: width=device-width, initial-scale=1.
Wpisanie stałej szerokości, na przykład width=375. Ekrany są różne; używaj device-width.
Wyłączanie zoomu przez user-scalable=no albo maximum-scale=1.
Obwinianie znacznika o przewijanie na boki. Znajdź element szerszy niż ekran i nadaj mu elastyczną szerokość.

Najczęściej zadawane pytania

Co robi znacznik meta viewport?

Mówi przeglądarkom mobilnym, jak szeroki ma być układ. Bez niego większość telefonów układa stronę na około 980 pikseli CSS i zmniejsza ją, żeby zmieściła się na ekranie. Z width=device-width układ odpowiada szerokości ekranu, więc tekst jest czytelny, a media queries działają.

Jak wygląda standardowy znacznik meta viewport?

<meta name="viewport" content="width=device-width, initial-scale=1">, umieszczony w <head>. To właściwy wybór dla prawie każdej responsywnej strony.

Dlaczego mój meta viewport nie działa?

Sprawdź, czy znacznik jest w <head>, czy name ma wartość viewport i czy wartości są oddzielone przecinkami. Jeśli strona nadal przewija się na boki, któryś element jest szerszy niż ekran, na przykład ma stałą szerokość, to duży obrazek albo długie słowo; znacznik nie naprawi CSS, który jest szerszy niż urządzenie.

Czy używać user-scalable=no albo maximum-scale=1?

Nie. Oba blokują powiększanie, na którym polega wielu użytkowników ze słabym wzrokiem, i nie przechodzą audytów dostępności. Safari na iOS i tak ignoruje user-scalable=no.

Czy znacznik meta viewport wpływa na przeglądarki na komputerze?

Nie. Przeglądarki na komputerze go ignorują; szerokość układu to tam po prostu szerokość okna. Znacznik ma znaczenie na telefonach i tabletach.

Powiązane zagadnienia