This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Jak zůstane web na mobilu čitelný bez bočního posouvání?
Web zůstává čitelný bez bočního posouvání, pokud se jeho obsah při úzkém zobrazení — standard počítá se šířkou 320 pixelů — automaticky zalomí do jednoho sloupce. Tato šířka odpovídá úzkému mobilnímu telefonu nebo silně zvětšenému zobrazení na počítači. Kdo pak musí u každého řádku posouvat obsah tam a zpět, ztrácí při čtení nit.
Přizpůsobení obsahu šířce zobrazení
Přizpůsobení obsahu znamená: Když se zobrazovací plocha zúží, obsah se uspořádá nově — sloupce vedle sebe se přesunou pod sebe, obrázky se zmenší, řádky se zalomí dříve. Týká se to dvou skupin současně. Zaprvé uživatelů mobilů, kteří na mnoha webech tvoří většinu návštěvníků. Zadruhé zrakově postižených lidí u počítače, kteří stránky silně zvětšují: Při silném zvětšení odpovídá viditelný výřez přesně takovému úzkému zobrazení. Pokud se stránka nezalomí, musí u každého řádku posouvat obsah doprava a zase zpět — čtení se stává zkouškou trpělivosti. Typickými příčinami jsou tabulky s pevnou šířkou, příliš velké vložené mapy a obrázky s pevnými rozměry v pixelech.
Jak naše měřicí jádro měří boční posouvání
Naše měřicí jádro vykresluje vaši stránku ve skutečném prohlížeči v několika šířkách obrazovky — včetně úzkého zobrazení 320 pixelů — a měří, zda vzniká vodorovný posuvník a o kolik pixelů obsah přetéká. Za nález se počítá jen skutečně naměřená posuvnost; aby se vyloučily náhodné výsledky způsobené zpožděním načítání, kontrola v případě pochybností měří dvakrát a kolísavé výsledky poctivě označuje jako „ověřit na skutečném zařízení“. Každý nález uvádí příslušnou šířku obrazovky a je doložen snímkem obrazovky. Výsledky se promítají jak do kontrolní oblasti Přístupnost, tak do kontrolní oblasti Responzivita — jde o stejné měření.
Příklady
Pevná šířka na mobilu
.inhalt { width: 1100px; }
.tabelle { min-width: 900px; }.inhalt { max-width: 1100px; width: 100%; }
.tabelle-huelle { overflow-x: auto; }S šířkou 320 pixelů (400 procent zoom), obsah proudí kolem; pouze tabulky a karty mohou mít vlastní plocha svitku.
- Postupně zmenšujte okno prohlížeče na počítači až po úzký sloupec — pokud se objeví vodorovný posuvník, je tu problém.
- Nejprve zkontrolujte tabulky: Velké datové tabulky potřebují na mobilu vlastní řešení, například posuvné kontejnery s viditelným upozorněním.
- Požádejte svou agenturu, aby pevné šířky v pixelech u obrázků a kontejnerů nahradila přizpůsobivými hodnotami.
- Otestujte vložený obsah, jako jsou mapy a videa, v úzkém zobrazení — cizí prvky nejčastěji narušují rozvržení.
- Po každé větší aktualizaci obsahu zkontrolujte mobilní zobrazení, než stránku zveřejníte.
