Responzivní webový design – Viewport
Co je Viewport?
Viewport je uživatelsky viditelná oblast webové stránky.
Výřez se liší podle zařízení a na mobilním telefonu bude menší než na obrazovce počítače.
Před tablety a mobilními telefony byly webové stránky určeny pouze pro obrazovky počítačů a bylo běžné, že webové stránky měly statický design a pevnou velikost.
Když jsme pak začali surfovat na internetu pomocí tabletů a mobilních telefonů, webové stránky pevné velikosti byly příliš velké, aby se vešly do zobrazované oblasti. Aby to napravily, prohlížeče na těchto zařízeních zmenšily celou webovou stránku, aby se vešla na obrazovku.
Tohle nebylo dokonalé!! Ale rychlé řešení.
Nastavení Výřezu
HTML5 zavedlo metodu, která umožňuje webovým designérům převzít kontrolu nad zobrazovanou oblastí prostřednictvím
<meta>značky.
Na všechny své webové stránky byste měli zahrnout následující <meta>prvek viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To dává prohlížeči pokyny, jak ovládat rozměry a měřítko stránky.
Část width=device-widthnastavuje šířku stránky tak, aby odpovídala šířce obrazovky zařízení (která se bude lišit v závislosti na zařízení).
Část initial-scale=1.0nastavuje počáteční úroveň přiblížení při prvním načtení stránky prohlížečem.
Zde je příklad webové stránky bez metaznačky viewport a stejné webové stránky s metaznačkou viewport:
Tip: Pokud si tuto stránku prohlížíte pomocí telefonu nebo tabletu, můžete kliknutím na dva výše uvedené odkazy vidět rozdíl.
Velikost obsahu do výřezu
Uživatelé jsou zvyklí posouvat webové stránky vertikálně na stolních i mobilních zařízeních – ale ne horizontálně!
Pokud je tedy uživatel nucen posouvat se vodorovně nebo oddalovat, aby viděl celou webovou stránku, má to za následek špatný uživatelský dojem.
Některá další pravidla, která je třeba dodržovat:
1. NEPOUŽÍVEJTE velké prvky s pevnou šířkou – Pokud je například obrázek zobrazen na šířku širší, než je výřez, může to způsobit vodorovné posouvání výřezu. Nezapomeňte upravit tento obsah tak, aby se vešel do šířky zobrazované oblasti.
2. NEDOVOLTE, aby obsah závisel na konkrétní šířce zobrazované oblasti, aby se dobře vykresloval – Vzhledem k tomu, že rozměry obrazovky a šířka v pixelech CSS se mezi zařízeními značně liší, obsah by se při dobrém vykreslování neměl spoléhat na konkrétní šířku zobrazované oblasti.
3. Pomocí dotazů na média CSS použijte různé styly pro malé a velké obrazovky – Nastavení velkých absolutních šířek CSS pro prvky stránky způsobí, že prvek bude příliš široký pro zobrazovanou oblast na menším zařízení. Místo toho zvažte použití relativních hodnot šířky, jako je šířka: 100 %. Buďte také opatrní při použití velkých absolutních polohových hodnot. Na malých zařízeních to může způsobit vypadnutí prvku mimo výřez.