Responzivní zobrazení webového designu
Obsah
Co je Výhled?
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 to bylo běžné aby měly webové stránky statický design a pevnou velikost.
Když jsme pak začali surfovat na internetu pomocí tabletů a mobilních telefonů, opraveno velikosti webových stránek 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 .
Na všechny své webové stránky byste měli zahrnout následující prvek zobrazované oblasti :
<meta name="viewport" content="width=device-width, initial-scale=1.0">To dává prohlížeči pokyny, jak na to k ovládání rozměrů a měřítka stránky.
Část width=device-width nastavuje šíř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.0 nastavuje 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 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é se používají k vertikálnímu posouvání webů na počítači i na mobilu zařízení - ale ne horizontálně!
Pokud je tedy uživatel nucen vodorovně posouvat nebo oddalovat, aby viděl celá webová stránka má za následek špatnou uživatelskou zkušenost.
Některá další pravidla, která je třeba dodržovat:
1. NEPOUŽÍVEJTE velké prvky s pevnou šířkou - Například pokud obrázek se zobrazí v šířce širší, než je výřez, který může způsobit výřez pro vodorovné posouvání. Nezapomeňte upravit tento obsah, aby se do něj vešel šířka výřezu.
2. NEDOVOLTE, aby obsah závisel na konkrétní šířce zobrazované oblasti vykreslovat dobře- Protože se rozměry obrazovky a šířka v pixelech CSS liší široce mezi zařízeními by obsah neměl záviset na konkrétní šířce zobrazované oblasti dobře vykreslit.
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 výřez na menším zařízení. Místo toho zvažte použití relativních hodnot šířky, jako je šířka: 100 %. Také být pozor na použití velkých absolutních polohových hodnot. Může to způsobit prvek na malých zařízeních spadnou mimo výřez.