---
title: "Viewport"
description: "Viewport to widoczny obszar strony w oknie przeglądarki, kluczowy dla responsywności. Zobacz, jak meta viewport wpływa na wyświetlanie na telefonach."
url: "https://nodea.pl/pl/slownik-pojec/viewport"
lang: "pl"
updated: "2026-07-13"
---

# Viewport

> Viewport to widoczny obszar strony w oknie przeglądarki na danym urządzeniu — jego rozmiar decyduje o tym, ile treści widać i jak działa responsywny układ.

**Viewport** to widoczny obszar strony w oknie przeglądarki na danym urządzeniu — prostokąt, w którym renderowana jest treść, zanim użytkownik zacznie przewijać. Jego rozmiar zależy od ekranu i okna: inny jest na monitorze komputera, inny na tablecie, a jeszcze inny na telefonie. Od wymiarów viewportu zależy, ile treści widać naraz i jak układa się responsywny layout.

## Meta viewport

Na urządzeniach mobilnych kluczową rolę odgrywa znacznik meta viewport w kodzie strony. Bez niego przeglądarki telefonów zakładają szeroki ekran wirtualny i pomniejszają całą stronę, zmuszając użytkownika do przybliżania i przewijania w bok. Ustawienie meta viewportu tak, aby szerokość odpowiadała szerokości urządzenia, sprawia, że strona renderuje się w rzeczywistej skali, a układ może poprawnie reagować na dostępną przestrzeń.

## Viewport a responsywność i UX

Viewport jest fundamentem [responsive web design](https://nodea.pl/pl/slownik-pojec/responsywnosc): reguły [CSS](https://nodea.pl/pl/slownik-pojec/css), w tym media queries oraz jednostki zależne od viewportu, pozwalają dopasowywać rozmiary, kolumny i odstępy do dostępnej przestrzeni. Poprawne zarządzanie viewportem wprost przekłada się na [UX](https://nodea.pl/pl/slownik-pojec/ux) — czytelność treści, wygodę dotykowych obszarów i brak konieczności ręcznego przybliżania. Ma też związek z [Core Web Vitals](https://nodea.pl/pl/slownik-pojec/core-web-vitals): źle zdefiniowany viewport lub elementy wykraczające poza jego szerokość powodują przesunięcia układu i pogarszają wrażenia. Projektując stronę, warto testować ją na różnych rozmiarach viewportu, aby mieć pewność, że treść pozostaje czytelna i użyteczna niezależnie od urządzenia.

### Po co ustawia się meta tag viewport?

Bez niego telefony renderują stronę jak na szerokim ekranie i pomniejszają całość, zmuszając do przybliżania. Meta viewport mówi przeglądarce, aby dopasowała szerokość do urządzenia, co jest warunkiem poprawnej responsywności.

## Powiązane

- [Responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc)
- [UX](https://nodea.pl/pl/slownik-pojec/ux)
- [Core Web Vitals](https://nodea.pl/pl/slownik-pojec/core-web-vitals)
- [CSS](https://nodea.pl/pl/slownik-pojec/css)

---

Wersje językowe: [en](https://nodea.io/en/glossary/viewport.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)