Tři tlačítka zařízení mění šířku editorového plátna. Pomáhají odhalit příliš úzký text, zalomené sloupce a prvky, které mají být na menší obrazovce skryté.
Co se naučíte
- Přepnout tři kontrolní šířky plátna.
- Rozlišit náhled podle zařízení.
- Kontrolovat šířky a viditelnost pozic v šabloně podle typu zařízení.
- Provést stejnou vizuální kontrolu v každém režimu.
Co jednotlivá tlačítka nastaví
| Režim | Šířka plátna | Na co se zaměřit |
|---|---|---|
| Desktop | dostupná šířka editoru | celková kompozice, široké řádky a více sloupců |
| Tablet | 768 px | přechodové rozložení, délka řádků textu a menu |
| Mobil | 575 px | skládání sloupců, pořadí obsahu a dotykově čitelné prvky |
Tlačítko zařízení nevytváří další verzi šablony. Přepne editor do odpovídajícího pohledu a znovu aplikuje responzivní pravidla gridu. Při přepnutí se plátno vrátí na začátek a otevřené mobilní menu se zavře, aby nový náhled začínal v předvídatelném stavu.
Kontrola krok za krokem
- Začněte na Desktopu a projděte stránku od hlavičky po patičku. Zkontrolujte, zda žádná část nepůsobí nahuštěně nebo prázdně.
- Přepněte Tablet. Sledujte, zda se sloupce vejdou, nadpisy se nelámou nevhodně a menu nezabírá nepřiměřený prostor.
- Přepněte Mobil. Ověřte logické pořadí bloků, šířku obrázků, čitelnost textu a viditelnost hlavních akcí.
- V Grid vyberte problémovou pozici a upravte její šířku nebo viditelnost pro aktuální rozsah. Responzivní nastavení je vlastnost pozice, ne modulu uvnitř.
- Po změně znovu projděte všechny tři režimy. Oprava mobilu může ovlivnit dědění nebo skládání ve větší šířce.
- Nakonec použijte čistý Preview, aby editační rámečky nezkreslovaly dojem.
Grid a vzhled se kontrolují odlišně
V Grid inspektoru má každá pozice (sloupec) viditelnost a Bootstrap šířku pro mobile, tablet a desktop. Číselná šířka se zpřístupní jen pro zařízení, které právě prohlížíte, a jen u řádku se dvěma nebo více pozicemi. Tím ihned vidíte dopad změny na plátně.
Běžné hodnoty v pravém vzhledovém inspektoru můžete přepínat také. Pokud se prvek na mobilu nevejde, nejdříve zjistěte, zda je problém v gridové šířce celé pozice, nebo ve společném vzhledu prvku uvnitř.
Všechny tři pohledy proto po každé důležité úpravě skutečně projděte. Samostatné responzivní CSS patří až do bezpečně omezeného CSS editoru nebo globálního CSS a je vhodné jen pro uživatele, kteří rozumějí media queries; pro běžný layout používejte přednostně Grid.
Náhled není měření konkrétního telefonu
Režimy používají pevné kontrolní šířky a běží stále ve vašem prohlížeči. Neověří chování každého zařízení, operačního systému ani skutečné Joomla stránky. Před nasazením proveďte kontrolu také na cílovém webu.