CSS/Styling

Viewport

Co je to viewport?

Viewport je viditelná oblast webové stránky v okně prohlížeče – tedy ta část obrazovky, kde se web skutečně zobrazuje. Na desktopu představuje viewport velikost okna prohlížeče, na mobilních zařízeních je to plocha displeje. Viewport je zásadní koncept pro moderní webdesign, protože určuje, kolik obsahu uživatel vidí najednou bez scrollování a jak se web přizpůsobuje různým velikostem obrazovek.

Bez správného nastavení viewportu se může web na mobilu zobrazovat jako zmenšená verze desktopového webu s nečitelně malým textem, který vyžaduje přibližování a horizontální scrollování – což je velmi špatná uživatelská zkušenost. Pro responzivní design je viewport klíčový, protože umožňuje webu rozpoznat velikost zařízení a přizpůsobit obsah odpovídajícím způsobem.

Historie a vývoj viewportu

V raných dobách mobilního webu (před rokem 2010) smartphony zobrazovaly webové stránky navržené pro desktop tak, že celou stránku zmenšily na malou obrazovku. Text byl nečitelně malý a uživatelé museli neustále přibližovat a oddalovat. To byla velmi frustrující zkušenost, která vedla Apple k zavedení viewport meta tagu v Safari iOS.

Mobilní prohlížeče proto používají dva typy rozměrů: fyzické pixely (skutečná rozlišení displeje, například 1080 × 1920) a CSS pixely (logická šířka, kterou prohlížeč používá pro renderování). Například iPhone má fyzické rozlišení 1170 × 2532 pixelů, ale jeho viewport je 390 × 844 CSS pixelů. Toto škálování umožňuje webům vypadat čitelně i na zařízeních s vysokým rozlišením, které mají tzv. Retina displej.

Jak viewport funguje v praxi?

Viewport meta tag v <head> sekci HTML dokumentu říká mobilnímu prohlížeči, že web je optimalizovaný pro mobilní zařízení a jak by se měl zobrazit. Bez tohoto tagu prohlížeč předpokládá, že jde o starý desktop web a pokusí se ho celý zmenšit na obrazovku. Výsledkem je zobrazen web s virtuální šířkou (obvykle 980px), který je poté zmenšen tak, aby se vešel na obrazovku mobilu.

Správně nastavený viewport meta tag říká prohlížeči: "Tento web je responzivní, použij skutečnou šířku zařízení a nezmenšuj ho." Díky tomu se aktivují všechny CSS media queries a breakpointy, které zajistí optimální zobrazení obsahu na každém zařízení.

Viewport meta tag – správné nastavení

Viewport meta tag je jednoduchá, ale kritická značka v <head> sekci každého moderního responzivního webu. Standardní a doporučené nastavení vypadá takto:

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

Pojďme si rozebrat jednotlivé parametry tohoto tagu:

  • width=device-width

    • Tato vlastnost říká prohlížeči, aby šířka viewportu odpovídala šířce zařízení v CSS pixelech. Na mobilu s 390 CSS pixelů bude viewport také 390 pixelů široký, na tabletu s 768 pixelů bude 768 pixelů. Díky tomu se obsah přizpůsobí velikosti obrazovky místo toho, aby web předstíral, že je na širokém monitoru.

  • initial-scale=1.0

    • Určuje výchozí úroveň přiblížení při prvním načtení stránky. Hodnota 1.0 znamená 100% zoom – žádné automatické přiblížení ani oddálení. Uživatel vidí obsah v jeho přirozené velikosti. Toto je důležité pro konzistentní zobrazení napříč zařízeními a zajišťuje, že typografie a rozměry prvků budou přesně takové, jak jste je navrhli.

  • maximum-scale, minimum-scale

    • Tyto vlastnosti omezují, jak moc může uživatel přiblížit nebo oddálit stránku. Důrazně se nedoporučuje používat maximum-scale=1.0 nebo minimum-scale=1.0, protože to brání uživatelům s horším zrakem zvětšit si obsah. To je nejen špatná přístupnost, ale také porušení WCAG 2.0 standardů a Google může takové stránky penalizovat v mobilním vyhledávání.

  • user-scalable

    • Parametr user-scalable=no úplně zakáže přibližování. Nikdy nepoužívejte user-scalable=no – je to velmi špatná praxe, která znemožňuje slabozrakým uživatelům používat váš web. Přístupnost by měla být prioritou každého moderního webu.

Viewport a responzivní design

Viewport meta tag je první krok k responzivnímu designu, ale sám o sobě nestačí. Musíte ho kombinovat s CSS media queries a responzivním layoutem. Media queries umožňují aplikovat různé styly na základě šířky viewportu.

Například můžete definovat, že na obrazovkách užších než 768 pixelů (typicky tablety a mobily) se navigační menu změní na hamburger menu, sloupce se poskládají pod sebe a velikost fontu se upraví pro lepší čitelnost. Breakpointy jsou konkrétní šířky viewportu, kde se design mění – například 480px pro mobily, 768px pro tablety, 1024px pro malé notebooky a 1440px pro velké monitory.

Moderní přístup mobile-first znamená, že design začínáte pro nejmenší obrazovky a pak postupně přidáváte layout pro větší zařízení pomocí media queries jako @media (min-width: 768px). Tím zajistíte, že web funguje skvěle na všech zařízeních. Podle statistik více než 60% návštěvnosti přichází z mobilních zařízení, takže optimalizace pro mobil není volitelná, ale nutnost.

Viewport jednotky v CSS

CSS nabízí speciální jednotky přímo navázané na velikost viewportu, které umožňují vytvářet skutečně dynamický a responzivní design. Tyto jednotky jsou ideální pro vytváření prvků, které se přizpůsobují velikosti obrazovky bez složitých výpočtů nebo media queries.

  • vw (viewport width)

    • 1vw = 1% šířky viewportu. Pokud má viewport 1000 pixelů na šířku, 1vw = 10 pixelů. Element s width: 50vw zabere vždy přesně polovinu šířky obrazovky bez ohledu na zařízení. Ideální pro bannery, hero sekce nebo layout komponenty, které mají být vždy proporcionální k šířce obrazovky. Velmi užitečné pro vytváření full-width sekcí, které přesahují standardní container.

  • vh (viewport height)

    • 1vh = 1% výšky viewportu. Perfektní pro vytváření full-screen sekcí. Například height: 100vh vytvoří element, který zabere přesně celou výšku obrazovky. Běžně používané pro úvodní hero sekce nebo splash screeny. Pozor ale na mobilních zařízeních, kde adresní řádek prohlížeče může měnit výšku viewportu při scrollování.

  • vmin a vmax

    • vmin je 1% menšího rozměru viewportu (šířky nebo výšky, podle toho co je menší), vmax je 1% většího rozměru. Užitečné pro prvky, které se mají přizpůsobovat oběma dimenzím najednou, například čtvercové prvky nebo kruhy, které mají být vždy viditelné celé bez ohledu na orientaci zařízení. Praktické pro responzivní ikony nebo dekorativní prvky.

  • Praktické využití viewport jednotek

    • Viewport jednotky jsou skvělé pro responzivní typografii – font-size: calc(16px + 1vw) vytvoří font, který roste s velikostí obrazovky. Můžete je použít pro full-width/height sekce, vzdálenosti mezi prvky a responzivní spacing bez nutnosti složitých media queries. Jsou také ideální pro CSS Grid layouty s dynamickými rozměry.

Testování viewportu na různých zařízeních

Aby váš web fungoval perfektně na všech zařízeních, je důležité ho testovat na různých velikostech viewportu. Moderní prohlížeče jako Chrome, Firefox nebo Edge nabízejí Developer Tools s režimem responzivního designu (Device Mode), kde můžete simulovat různá zařízení a velikosti obrazovek.

Můžete také využít online nástroje jako BrowserStack nebo Responsive Design Checker, které vám umožní otestovat web na reálných zařízeních. Google Search Console nabízí také Mobile-Friendly Test, který zkontroluje, zda je váš web optimalizovaný pro mobilní zařízení a správně používá viewport meta tag.

Nejčastější chyby při práci s viewportem

  • Chybějící viewport meta tag

    • Bez viewport meta tagu se web na mobilech zobrazí jako zmenšený desktop, text je nečitelný a uživatelé musí neustále přibližovat a scrollovat horizontálně. To vede k vysokému bounce rate a špatným výsledkům v mobilním vyhledávání Google.

  • Používání user-scalable=no nebo maximum-scale=1

    • Tato nastavení znemožňují uživatelům přiblížení, což je špatné pro přístupnost. Porušuje to standardy přístupnosti a může vést k penalizaci v Google. Vždy umožněte uživatelům ovládat úroveň zoomu podle jejich potřeb.

  • Fixní šířky v pixelech

    • Elementy s fixní šířkou jako width: 1200px se na mobilu nevejdou a způsobí horizontální scrollování. Používejte relativní jednotky jako procenta, em, rem nebo viewport jednotky. Pro containery používejte max-width místo width.

  • Příliš velké obrázky

    • Obrázky bez max-width: 100% a height: auto přetečou viewport a rozbijí layout. Vždy nastavte maximální šířku obrázků na 100% jejich containeru a používejte responzivní obrázky s atributem srcset.

  • Ignorování breakpointů

    • Design vypadá dobře na desktopu, ale je nečitelný na mobilu kvůli absenci media queries. Vždy navrhujte a testujte web pro všechny velikosti obrazovek. Použijte mobile-first přístup pro lepší výsledky.

Výhody správného nastavení viewportu

  • Optimální zobrazení na všech zařízeních

    • Web vypadá perfektně na mobilu, tabletu i desktopu. Obsah je čitelný, navigation funguje intuitivně a uživatelé nepotřebují přibližovat nebo scrollovat horizontálně. To vede k delší době stráveného času na webu a nižšímu bounce rate.

  • Lepší uživatelská zkušenost

    • Žádné zbytečné scrollování nebo přibližování, čitelný text optimální velikosti. Uživatelé mohou snadno číst obsah, vyplňovat formuláře a provádět požadované akce bez frustrace.

  • Vyšší SEO pozice

    • Google preferuje mobile-friendly weby v mobilním vyhledávání a od roku 2019 používá mobile-first indexing – to znamená, že hodnotí především mobilní verzi webu. Správný viewport je základní požadavek pro dobré umístění ve vyhledávání.

  • Nižší bounce rate

    • Uživatelé neopouštějí web kvůli špatnému mobilnímu zobrazení. Pokud se web načte rychle a je dobře čitelný, návštěvníci zůstanou a prozkoumají další stránky. To pozitivně ovlivňuje všechny metriky webu.

  • Vyšší konverze z mobilů

    • Více než 60% návštěvnosti přichází z mobilních zařízení a tento podíl neustále roste. Optimalizovaný viewport zajistí, že mobilní uživatelé mohou snadno vyplnit kontaktní formulář, provést nákup nebo zavolat. To se přímo promítá do zvýšení konverzí.

Nejčastější otázky o viewportu

Co je to viewport jednoduše vysvětleno? Rozbalit

Viewport je viditelná oblast webové stránky v prohlížeči – tedy část obrazovky, kde se web zobrazuje. Na desktopu je viewport obvykle celé okno prohlížeče, na mobilu je to menší plocha displeje. Viewport určuje, kolik obsahu uživatel vidí najednou bez nutnosti posouvání. Pro responzivní weby je klíčové správně nastavit viewport meta tag, aby se obsah správně přizpůsobil různým velikostem obrazovek.

K čemu slouží viewport meta tag? Rozbalit

Viewport meta tag říká mobilnímu prohlížeči, jak má web zobrazit a škálovat. Správné nastavení <meta name="viewport" content="width=device-width, initial-scale=1.0"> zajistí, že se web na mobilu zobrazí v optimální velikosti bez horizontálního scrollování a bez nutnosti přibližování. Bez viewport meta tagu se mobilní prohlížeče snaží zobrazit celý desktop web zmenšený, což vede k nečitelnému textu a špatné uživatelské zkušenosti.

Jak správně nastavit viewport pro responzivní web? Rozbalit

Standardní a doporučené nastavení viewportu je: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Toto nastavení říká prohlížeči, aby šířka viewportu odpovídala šířce zařízení (width=device-width) a výchozí zoom byl 100% (initial-scale=1.0). Nikdy nepoužívejte maximum-scale=1, user-scalable=no, protože to brání uživatelům přibližovat obsah, což je špatné pro přístupnost.

Co jsou viewport jednotky v CSS? Rozbalit

Viewport jednotky jsou CSS jednotky relativní k velikosti viewportu: vw (1% šířky viewportu), vh (1% výšky viewportu), vmin (1% menšího rozměru) a vmax (1% většího rozměru). Používají se pro vytvoření prvků, které se dynamicky přizpůsobují velikosti obrazovky. Například width: 50vw znamená, že element zabere 50% šířky viewportu bez ohledu na zařízení. Ideální pro full-screen sekce nebo responzivní typografii.

Proč se můj web na mobilu zobrazuje špatně i s viewportem? Rozbalit

Nejčastější příčiny: 1) Máte fixní šířky v pixelech místo relativních jednotek (%, em, rem). 2) Používáte příliš velké obrázky bez max-width: 100%. 3) Nemáte nastavené CSS media queries pro různé velikosti obrazovek. 4) Horizontální padding/margin způsobuje přetečení obsahu. 5) Zapomněli jste přidat breakpointy pro mobilní zobrazení. Viewport meta tag je základ, ale musíte kombinovat s responzivním CSS.

Související pojmy

Responzivní design Mobile-first CSS Breakpoint Layout