Odemkněte plynulé mobilní webové zážitky po celém světě díky podrobnému pohledu na pravidla CSS viewport, meta tagy a responzivní design pro optimální kontrolu.
Pravidlo CSS Viewport: Zvládnutí ovládání mobilního viewportu pro globální webové zážitky
V dnešním propojeném světě, kde miliardy uživatelů přistupují k internetu primárně prostřednictvím mobilních zařízení, není zajištění konzistentního a optimálního uživatelského zážitku na nesčetných velikostech a rozlišeních obrazovek pouhou výhodou; je to absolutní nutnost. Mobilní web je rozmanité prostředí, od kompaktních chytrých telefonů po větší tablety, přičemž každé zařízení představuje pro designéry a vývojáře své vlastní jedinečné výzvy. V srdci poskytování skutečně adaptivního a uživatelsky přívětivého zážitku leží klíčové porozumění a implementace pravidla CSS viewport. Tento základní koncept určuje, jak je webový obsah vykreslován a škálován na mobilních zařízeních, a slouží jako základní kámen responzivního web designu.
Bez správné kontroly viewportu se mohou webové stránky na mobilních obrazovkách jevit jako malé, nečitelné nebo obtížně ovladatelné, což vede k vysoké míře okamžitého opuštění a zhoršenému uživatelskému zážitku. Představte si globální e-commerce platformu, kde zákazníci v Tokiu, Berlíně nebo São Paulu mají potíže se zobrazením obrázků produktů nebo dokončením transakcí, protože web není optimalizován pro jejich kapesní zařízení. Takové scénáře zdůrazňují hluboký význam zvládnutí ovládání mobilního viewportu. Tento komplexní průvodce se podrobně ponoří do mechaniky pravidla CSS viewport, prozkoumá jeho vlastnosti, praktické aplikace, běžné výzvy a osvědčené postupy, které vám umožní vytvářet skutečně robustní a globálně dostupné webové aplikace.
Porozumění viewportu: Plátno mobilního webu
Než budeme moci efektivně ovládat viewport, je nezbytné pochopit, co skutečně představuje. Na stolních počítačích je viewport obecně přímočarý: je to samotné okno prohlížeče. Mobilní prostředí však přináší vrstvy složitosti, především kvůli obrovským rozdílům ve fyzických rozměrech a rozlišeních obrazovek ve srovnání s tradičními monitory.
Co je to viewport?
Koncepčně je viewport viditelná oblast webové stránky na obrazovce zařízení. Je to „okno“, skrze které uživatel prohlíží váš obsah. Na rozdíl od desktopových prohlížečů, kde je toto okno obvykle ovládáno uživatelem měnícím velikost svého prohlížeče, se na mobilních zařízeních prohlížeč často ve výchozím nastavení snaží prezentovat „desktopový“ zážitek, což může být pro uživatelský zážitek kontraproduktivní. Abychom to pochopili, musíme rozlišovat mezi dvěma klíčovými typy viewportu: layout viewport a vizuální viewport.
Layout Viewport vs. Vizuální Viewport
Aby se přizpůsobily webovým stránkám navrženým pro větší desktopové obrazovky, zavedly rané mobilní prohlížeče koncept „layout viewportu“ (také známého jako „document viewport“ nebo „virtual viewport“).
- Layout Viewport: Toto je větší plátno mimo obrazovku, kde prohlížeč vykresluje celou webovou stránku. Ve výchozím nastavení mnoho mobilních prohlížečů nastavuje tento layout viewport na šířku 980px nebo 1024px, bez ohledu na skutečnou fyzickou šířku obrazovky zařízení. To umožňuje prohlížeči vykreslit stránku, jako by byla na desktopu, a poté ji zmenšit, aby se vešla na menší fyzickou obrazovku. Ačkoli to zabraňuje rozbití obsahu, často to vede k nečitelně malému textu a drobným interaktivním prvkům, což nutí uživatele používat gesto pinch-zoom a posouvat se horizontálně.
- Vizuální Viewport: Toto je skutečná viditelná část layout viewportu. Představuje obdélníkovou oblast, která je aktuálně viditelná uživateli na obrazovce jeho zařízení. Když uživatel přiblíží mobilní stránku, layout viewport zůstává stejné velikosti, ale vizuální viewport se zmenšuje a zaměřuje se na menší část layout viewportu. Když oddálí pomocí gesta pinch-zoom, vizuální viewport se rozšiřuje, dokud se neshoduje s layout viewportem (nebo maximální úrovní zoomu). Klíčovým poznatkem zde je, že CSS rozměry jako width: 100% a media queries fungují na základě layout viewportu, nikoli vizuálního viewportu, pokud nejsou specificky nakonfigurovány jinak pomocí meta tagu viewport.
Rozdíl mezi těmito dvěma viewporty je přesně to, co se meta tag viewport snaží řešit, a umožňuje vývojářům sladit layout viewport se skutečnou šířkou zařízení, čímž umožňuje skutečný responzivní design.
Role meta tagu viewport
HTML tag , umístěný v sekci vašeho dokumentu, je primárním mechanismem pro ovládání chování viewportu na mobilních zařízeních. Dává prohlížeči pokyny, jak nastavit layout viewport a jak škálovat a vykreslit stránku. Tento jediný řádek kódu je pravděpodobně nejdůležitější složkou pro zajištění responzivního mobilního zážitku. Nejběžnější a doporučený meta tag viewport je:
Pojďme si rozebrat základní atributy v tomto kritickém meta tagu.
Klíčové vlastnosti meta tagu viewport
Atribut content meta tagu viewport přijímá seznam vlastností oddělených čárkou, které určují, jak má prohlížeč interpretovat a zobrazit vaši webovou stránku na mobilních obrazovkách. Pochopení každé vlastnosti je zásadní pro jemné doladění vaší mobilní prezentace.
width
Vlastnost width řídí velikost layout viewportu. Je to pravděpodobně nejdůležitější vlastnost pro responzivní design.
width=device-width: Toto je nejčastěji používaná a vysoce doporučená hodnota. Dává prohlížeči pokyn, aby nastavil šířku layout viewportu na šířku zařízení v pixelech nezávislých na zařízení (DIP). To znamená, že zařízení s fyzickou šířkou obrazovky 360px (v DIP, i když jeho skutečné rozlišení pixelů je mnohem vyšší) bude mít layout viewport o velikosti 360px. Tím se vaše hodnoty CSS pixelů přímo srovnají s efektivní šířkou zařízení, což umožňuje, aby CSS media queries založené na min-width nebo max-width fungovaly zamýšleným způsobem ve vztahu k velikosti zařízení. Například pokud máte @media (max-width: 768px) { ... }, tento dotaz se spustí na zařízeních, jejichž device-width je 768px nebo méně, což zajistí správné použití vašich stylů pro tablety nebo mobilní telefony.width=[hodnota]: Můžete také nastavit konkrétní hodnotu v pixelech, např. width=980. Tím se vytvoří layout viewport s pevnou šířkou, podobně jako výchozí chování starších mobilních prohlížečů. Ačkoli to může být užitečné pro starší weby, které nebyly navrženy responzivně, popírá to výhody responzivního designu a pro moderní webový vývoj se obecně nedoporučuje, protože to pravděpodobně povede k horizontálnímu posouvání nebo extrémnímu škálování na menších obrazovkách.
initial-scale
Vlastnost initial-scale řídí úroveň přiblížení při prvním načtení stránky. Určuje poměr mezi šířkou layout viewportu a šířkou vizuálního viewportu.
initial-scale=1.0: Toto je standardní a doporučená hodnota. Znamená to, že vizuální viewport bude mít při načtení stránky poměr 1:1 s layout viewportem. Pokud je také nastaveno width=device-width, zajišťuje to, že 1 CSS pixel se rovná 1 pixelu nezávislému na zařízení, což zabraňuje jakémukoli počátečnímu přiblížení nebo oddálení, které by mohlo narušit váš responzivní layout. Například, pokud má mobilní zařízení device-width 360px, nastavení initial-scale=1.0 znamená, že prohlížeč vykreslí stránku tak, aby se 360 CSS pixelů přesně vešlo do vizuálního viewportu, bez jakéhokoli počátečního škálování.initial-scale=[hodnota]: Hodnoty větší než 1.0 (např. initial-scale=2.0) by zpočátku přiblížily a obsah by se zdál větší. Hodnoty menší než 1.0 (např. initial-scale=0.5) by zpočátku oddálily a obsah by se zdál menší. Tyto hodnoty se pro standardní responzivní designy používají zřídka, protože mohou od začátku vytvářet nekonzistentní uživatelský zážitek.
minimum-scale a maximum-scale
Tyto vlastnosti definují minimální a maximální úroveň přiblížení, kterou mohou uživatelé po načtení stránky použít.
minimum-scale=[hodnota]: Nastavuje nejnižší povolenou úroveň přiblížení. Například minimum-scale=0.5 by uživatelům umožnilo oddálit na polovinu původní velikosti.maximum-scale=[hodnota]: Nastavuje nejvyšší povolenou úroveň přiblížení. Například maximum-scale=2.0 by uživatelům umožnilo přiblížit na dvojnásobek původní velikosti.
Ačkoli tyto vlastnosti nabízejí kontrolu, nastavení omezujících minimálních nebo maximálních měřítek (zejména maximum-scale=1.0) může být škodlivé pro přístupnost. Uživatelé se zrakovým postižením se často spoléhají na gesto pinch-to-zoom pro čtení obsahu. Zabránění této funkcionalitě může vaši stránku učinit nepoužitelnou pro významnou část globálního publika. Obecně se doporučuje vyhnout se omezování uživatelského škálování, pokud neexistuje velmi specifický, přesvědčivý důvod z hlediska uživatelského zážitku nebo bezpečnosti, a i tehdy pouze s pečlivým zvážením pokynů pro přístupnost.
user-scalable
Vlastnost user-scalable přímo řídí, zda si uživatelé mohou stránku přibližovat nebo oddalovat.
user-scalable=yes(nebouser-scalable=1): Umožňuje uživatelům přibližování. Toto je výchozí chování prohlížeče, pokud je vlastnost vynechána, a obecně se doporučuje pro přístupnost.user-scalable=no(nebouser-scalable=0): Zabraňuje uživatelům v přibližování. Toto nastavení, často spojené s maximum-scale=1.0, může vážně narušit přístupnost pro uživatele, kteří vyžadují větší velikost textu nebo zvětšený obsah. Ačkoli to může zabránit problémům s layoutem způsobeným extrémním přiblížením, dopady na přístupnost jsou značné a obecně převažují nad vnímanými výhodami. Důrazně se nedoporučuje používat toto nastavení ve většině produkčních prostředí a dodržovat globální standardy přístupnosti, jako je WCAG (Web Content Accessibility Guidelines), které obhajují kontrolu uživatele nad škálováním obsahu.
height
Podobně jako width, vlastnost height umožňuje nastavit výšku layout viewportu. Tato vlastnost se však zřídka používá s device-height, protože výška viditelné oblasti prohlížeče se může výrazně lišit kvůli prvkům prohlížeče (chrome), dynamickým nástrojovým lištám a zobrazení virtuální klávesnice na mobilních zařízeních. Spoléhání se na pevnou výšku nebo device-height může vést k nekonzistentním layoutům a neočekávanému posouvání. Většina responzivních designů spravuje vertikální layouty prostřednictvím toku obsahu a posouvání, nikoli pevných výšek viewportu.
Shrnutí doporučeného meta tagu viewport:
Tento jediný řádek poskytuje optimální základ pro responzivní design, dává prohlížeči pokyn, aby přizpůsobil šířku layout viewportu šířce zařízení a nastavil neškálovaný počáteční pohled, přičemž klíčově umožňuje uživatelům volně přibližovat pro účely přístupnosti.
Jednotky viewportu: Za hranicemi pixelů pro dynamické dimenzování
Zatímco tradiční jednotky CSS jako pixely (px), em a rem jsou mocné, jednotky viewportu nabízejí jedinečný způsob, jak dimenzovat prvky relativně k rozměrům samotného viewportu. Tyto jednotky jsou zvláště výhodné při vytváření dynamických a plynulých layoutů, které přirozeně reagují na velikost obrazovky uživatele, aniž by se spoléhaly pouze na media queries pro každou poměrovou úpravu. Představují procento rozměrů layout viewportu a poskytují přímější kontrolu nad velikostí prvku ve vztahu k viditelné oblasti obrazovky.
vw (Viewport Width)
- Definice: 1vw se rovná 1 % šířky layout viewportu.
- Příklad: Pokud je layout viewport široký 360px (jako na typickém mobilním zařízení s width=device-width), pak 10vw bude 36px (10 % z 360px). Pokud se viewport rozšíří na 1024px na tabletu, pak 10vw bude 102.4px.
- Využití: Ideální pro typografii, velikost obrázků nebo šířky kontejnerů, které se musí škálovat proporcionálně s šířkou obrazovky. Například nastavení velikosti písma pomocí vw může zajistit, že text zůstane čitelný na široké škále velikostí obrazovek bez neustálých úprav pomocí media queries pro každý zlomový bod.
- Příklad kódu:
h1 { font-size: 8vw; }.hero-image { width: 100vw; height: auto; }
vh (Viewport Height)
- Definice: 1vh se rovná 1 % výšky layout viewportu.
- Příklad: Pokud je layout viewport vysoký 640px, pak 50vh bude 320px (50 % z 640px).
- Využití: Perfektní pro vytváření sekcí na celou obrazovku, hlavních bannerů nebo prvků, které musí zabírat určité procento viditelné výšky obrazovky. Běžnou aplikací je vytvoření hlavní sekce (hero section), která vždy vyplní obrazovku, bez ohledu na orientaci nebo velikost zařízení.
- Příklad kódu:
.full-screen-section { height: 100vh; }
vmin (Viewport Minimum) a vmax (Viewport Maximum)
Tyto jednotky jsou méně časté, ale nabízejí silné možnosti pro zajištění responzivity na základě menšího nebo většího rozměru viewportu.
- Definice
vmin: 1vmin se rovná 1 % menšího rozměru (šířky nebo výšky) layout viewportu. - Příklad
vmin: Pokud je viewport široký 360px a vysoký 640px, 1vmin bude 3.6px (1 % z 360px). Pokud uživatel otočí zařízení na šířku (např. 640px široký a 360px vysoký), 1vmin bude stále 3.6px (1 % z 360px). - Využití
vmin: Užitečné pro prvky, které by se měly zmenšovat relativně k tomu rozměru (šířce nebo výšce), který je více omezující. To může zabránit tomu, aby se prvky staly příliš velkými v jednom rozměru, zatímco v druhém zůstanou příliš malé, zejména při práci s čtvercovými prvky nebo ikonami, které se musí elegantně vejít do orientace na výšku i na šířku. - Příklad kódu:
.square-icon { width: 10vmin; height: 10vmin; }
- Definice
vmax: 1vmax se rovná 1 % většího rozměru (šířky nebo výšky) layout viewportu. - Příklad
vmax: Pokud je viewport široký 360px a vysoký 640px, 1vmax bude 6.4px (1 % z 640px). Pokud uživatel otočí zařízení na šířku (např. 640px široký a 360px vysoký), 1vmax bude stále 6.4px (1 % z 640px). - Využití
vmax: Ideální pro prvky, které by měly být vždy viditelné a růst s největším rozměrem obrazovky, aby se nikdy nestaly příliš malými na to, aby byly čitelné nebo interaktivní. Například velký obrázek na pozadí nebo významný textový blok, který by měl vždy zabírat podstatnou část obrazovky. - Příklad kódu:
.background-text { font-size: 5vmax; }
Praktické aplikace a úvahy pro jednotky viewportu
Jednotky viewportu, i když jsou silné, vyžadují pečlivou implementaci:
- Typografie: Kombinace vw s jednotkami rem nebo em (pomocí calc()) může vytvořit plynulou typografii, která se krásně škáluje. Například nastavení font-size: calc(1rem + 0.5vw); umožňuje, aby se velikosti písma mírně přizpůsobovaly šířce viewportu, zatímco stále poskytují silný základ.
- Layouty: Pro prvky, které musí zabírat specifický zlomek obrazovky, jako jsou postranní panely nebo obsahové sloupce v plynulé mřížce, nabízejí jednotky viewportu přímé řešení.
- Velikost obrázků: Zatímco max-width: 100% je standard pro responzivní obrázky, použití vw pro rozměry obrázků může být užitečné pro specifické designové prvky, které musí přesně vyplnit procento šířky obrazovky.
- Kompatibilita prohlížečů: Jednotky viewportu jsou široce podporovány v moderních prohlížečích, včetně mobilních. Buďte si však vědomi specifických zvláštností prohlížečů, zejména pokud jde o jednotku vh na mobilních zařízeních, o které se pojednává v pozdějších sekcích.
- Přehnané škálování: Buďte opatrní při používání jednotek viewportu pro velmi malé nebo velmi velké prvky. Velikost písma 1vw se může stát nečitelně malou na malém telefonu, zatímco 50vw by mohlo být přehnaně velké na širokém monitoru. Kombinace s CSS funkcemi min() a max() může omezit jejich rozsah.
Responzivní design a ovládání viewportu: Silné spojenectví
Ovládání viewportu, zejména prostřednictvím meta tagu viewport, je základem, na kterém je postaven moderní responzivní web design. Bez něj by CSS media queries byly na mobilních zařízeních z velké části neúčinné. Skutečná síla se objevuje, když tyto dvě technologie pracují v součinnosti, což umožňuje vaší webové stránce elegantně se přizpůsobit jakékoli velikosti, orientaci a rozlišení obrazovky po celém světě.
Synergie s CSS Media Queries
CSS Media Queries vám umožňují aplikovat různé styly na základě různých charakteristik zařízení, jako je šířka obrazovky, výška, orientace a rozlišení. V kombinaci s se media queries stávají neuvěřitelně přesnými a spolehlivými.
- Jak spolupracují:
- Meta tag viewport zajišťuje, že width=device-width přesně nastaví layout viewport na skutečnou šířku zařízení v CSS pixelech.
- Media queries poté používají tuto přesnou šířku layout viewportu k aplikaci stylů. Například dotaz jako @media (max-width: 600px) { ... } správně zacílí na zařízení, jejichž efektivní šířka je 600px nebo méně, bez ohledu na jejich výchozí „desktopové“ nastavení layout viewportu.
- Běžné zlomové body (globální perspektiva): I když se konkrétní hodnoty zlomových bodů mohou lišit v závislosti na obsahu a designu, běžnou strategií je cílit na obecné kategorie zařízení:
- Malé mobilní telefony: @media (max-width: 375px) { ... } (cílení na velmi malé telefony)
- Mobilní telefony: @media (max-width: 767px) { ... } (běžné chytré telefony, na výšku)
- Tablety: @media (min-width: 768px) and (max-width: 1023px) { ... } (tablety, malé notebooky)
- Desktop: @media (min-width: 1024px) { ... } (větší obrazovky)
- Příklad kódu pro Media Queries:
/* Výchozí styly pro větší obrazovky */body { font-size: 18px; }.container { max-width: 1200px; margin: 0 auto; }/* Styly pro obrazovky do 767px šířky (např. většina chytrých telefonů) */@media (max-width: 767px) {body { font-size: 16px; }.container { width: 95%; padding: 0 10px; }.navigation { flex-direction: column; }}
Strategie pro vývoj „Mobile-First“
Koncept „mobile-first“ (mobil na prvním místě) je silným paradigmatem v responzivním web designu, které přímo využívá ovládání viewportu. Místo navrhování pro desktop a následného přizpůsobování pro mobilní zařízení, mobile-first obhajuje budování základního zážitku nejprve pro nejmenší obrazovky a jeho postupné vylepšování pro větší viewporty.
- Proč Mobile-First?
- Výkon: Zajišťuje, že mobilní uživatelé, často na pomalejších sítích a méně výkonných zařízeních, obdrží pouze nezbytné styly a zdroje, což vede k rychlejším časům načítání.
- Prioritizace obsahu: Nutí vývojáře upřednostňovat obsah a funkcionalitu, protože prostor na obrazovce je omezený.
- Progresivní vylepšování: Jak se obrazovky zvětšují, „přidáváte“ styly (např. složitější layouty, větší obrázky) pomocí media queries s min-width. To zajišťuje, že základní zážitek je vždy optimalizován pro mobilní zařízení.
- Globální přístupnost: Mnoho regionů, zejména rozvíjející se trhy, je pouze mobilních. Přístup mobile-first přirozeně vychází vstříc většině globální internetové populace.
- Implementace:
- Začněte se základním CSS, které se vztahuje na všechny velikosti obrazovek (primárně mobilní).
- Použijte media queries s min-width k přidání stylů pro postupně větší obrazovky.
/* Základní styly (mobile-first) */.element { width: 100%; padding: 10px; }/* Aplikovat širší šířku pro tablety a větší */@media (min-width: 768px) {.element { width: 50%; float: left; }}/* Aplikovat ještě širší šířku pro desktopy */@media (min-width: 1024px) {.element { width: 33%; }}
Zpracování různých poměrů pixelů zařízení (DPR)
Moderní mobilní zařízení, zejména špičkové chytré telefony a tablety, mají často velmi vysokou hustotu pixelů, což vede k poměru pixelů zařízení (Device Pixel Ratio, DPR) většímu než 1. DPR 2 znamená, že 1 CSS pixel odpovídá 2 fyzickým pixelům zařízení. Zatímco meta tag viewport se stará o škálování layout viewportu relativně k pixelům nezávislým na zařízení, obrázky a další mediální zdroje vyžadují zvláštní pozornost, aby na obrazovkách s vysokým DPR (často nazývaných „Retina“ displeje) vypadaly ostře.
- Proč je to důležité: Pokud poskytnete obrázek o velikosti 100x100 pixelů zařízení s DPR 2, bude vypadat rozmazaně, protože prohlížeč ho efektivně roztáhne, aby vyplnil oblast 200 fyzických pixelů.
- Řešení:
- Responzivní obrázky (
srcsetasizes): Atribut srcset tagu HTMLvám umožňuje specifikovat více zdrojů obrázků pro různé hustoty pixelů a velikosti viewportu. Prohlížeč si pak vybere nejvhodnější obrázek.
To dává prohlížeči pokyn, aby použil `image-lowres.jpg` pro standardní displeje a `image-highres.jpg` pro displeje s vysokým DPR. Můžete to také kombinovat s atributem `sizes` pro responzivní šířky.
- CSS Media Queries pro rozlišení: Ačkoli je to pro obrázky méně běžné, můžete použít media queries k poskytování různých obrázků na pozadí nebo stylů na základě rozlišení.
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body { background-image: url('high-res-background.jpg'); } } - SVG a ikonová písma: Pro vektorovou grafiku a ikony jsou ideální SVG (Scalable Vector Graphics) a ikonová písma (jako Font Awesome), protože jsou nezávislé na rozlišení a dokonale se škálují na jakýkoli DPR bez ztráty kvality.
- Responzivní obrázky (
Běžné výzvy s viewportem a jejich řešení
Navzdory silným schopnostem ovládání viewportu se vývojáři často setkávají se specifickými problémy, které mohou narušit mobilní uživatelský zážitek. Pochopení těchto běžných problémů a jejich řešení je klíčové pro vytváření odolných webových aplikací pro globální publikum.
Problém „100vh“ na mobilních prohlížečích
Jedním z nejtrvalejších a nejfrustrujících problémů pro front-end vývojáře je nekonzistentní chování jednotky 100vh na mobilních prohlížečích. Zatímco 100vh teoreticky znamená „100 % výšky viewportu“, na mobilních zařízeních dynamické nástrojové lišty prohlížeče (adresní řádek, navigační lišta) často zakrývají část obrazovky, což způsobuje, že 100vh se vztahuje k výšce viewportu bez přítomnosti těchto lišt. Když uživatel posouvá stránku, tyto lišty se často skryjí, čímž se rozšíří vizuální viewport, ale hodnota 100vh se dynamicky neaktualizuje, což vede k prvkům, které jsou příliš vysoké nebo způsobují neočekávané posouvání.
- Problém: Pokud nastavíte height: 100vh; pro sekci na celou obrazovku, při načtení stránky se může rozšířit pod viditelnou část, protože 100vh se vztahuje k výšce, když jsou dynamické nástrojové lišty skryté, i když jsou zpočátku viditelné.
- Řešení:
- Použití nových jednotek viewportu (CSS Working Draft): Moderní CSS zavádí nové jednotky, které se specificky zabývají tímto problémem:
svh(Small Viewport Height): 1 % výšky viewportu, když jsou dynamické nástrojové lišty viditelné.lvh(Large Viewport Height): 1 % výšky viewportu, když jsou dynamické nástrojové lišty skryté.dvh(Dynamic Viewport Height): 1 % výšky viewportu, dynamicky se přizpůsobující, jak se lišty objevují/mizí.
Tyto jednotky nabízejí nejrobustnější a nejelegantnější řešení, ale jejich podpora v prohlížečích se stále vyvíjí. Můžete je použít s nouzovými řešeními (fallbacks):
.hero-section { height: 100vh; /* Fallback pro starší prohlížeče */ height: 100dvh; /* Použít dynamickou výšku viewportu */ } - JavaScriptové řešení: Běžným a široce podporovaným řešením je použití JavaScriptu k výpočtu skutečné vnitřní výšky okna a její aplikace jako CSS proměnné nebo inline stylu.
// V JavaScriptu:function setDocHeight() {document.documentElement.style.setProperty('--doc-height', `${window.innerHeight}px`);}window.addEventListener('resize', setDocHeight);setDocHeight();/* V CSS: */.hero-section { height: var(--doc-height); }Tento přístup se konzistentně přizpůsobuje skutečné viditelné výšce.
- Použití nových jednotek viewportu (CSS Working Draft): Moderní CSS zavádí nové jednotky, které se specificky zabývají tímto problémem:
Problémy s neočekávaným přiblížením
Zatímco meta tag viewport s initial-scale=1.0 obecně zabraňuje neočekávanému počátečnímu přiblížení, jiné prvky mohou někdy spustit nechtěné zvětšení, zejména na zařízeních s iOS.
- Přiblížení vstupních polí při zaostření (iOS): Když uživatel klepne na vstupní pole (,