This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Responsive
Jak zkontrolovat jeden prvek na všech velikostech obrazovky?
Jeden prvek se kontroluje tak, že se cíleně osloví a měří se zvlášť na každé velikosti zařízení. Kontrolní služba dělá přesně to: hledá pojmenovaný prvek — třeba cenovou tabulku, přihlašovací formulář nebo vložený kalendář — na chytrém telefonu, tabletu a počítači a zjišťuje, zda je přítomný a viditelný, zda se celý vejde do šířky zařízení a zda se dobře ovládá.
Tyto otázky zodpoví kontrola prvku
Pro každou velikost zařízení kontrola zodpoví pět otázek. Je prvek vůbec přítomen? Některé stavební bloky na malých obrazovkách úplně zmizí. Je viditelný, s měřitelnou šířkou a výškou? Vejde se do šířky zařízení, nebo přesahuje boční okraj obrazovky? Mají všechny ovládací plochy v něm — tlačítka, odkazy, vstupní pole — velikost aspoň 24 krát 24 pixelů, jak vyžaduje pravidlo přístupnosti WCAG 2.5.8? A zůstává v něm každý text čitelný celý, místo aby se ořízl? Ke každému profilu zařízení zpráva přikládá označený snímek obrazovky, na kterém je kontrolovaný prvek zvýrazněný — stav je tak doložený, ne jen tvrzený.
Pak se vyplatí zaměřit se na jeden prvek
Cílená kontrola je správný nástroj, když konkrétní místo dělá starosti nebo bylo právě opraveno. Typické případy: cenová tabulka na mobilu přesahovala přes okraj a po opravě má být doloženo, že se teď vejde na všechny čtyři velikosti zařízení. Nový kontaktní formulář má být před spuštěním prověřen na ovladatelnost. Nebo se vložený cizí obsah — mapa, rezervační okno, hodnoticí modul — chová jinak než zbytek stránky, protože pochází od jiného poskytovatele. Místo opakované kontroly celé stránky dává kontrola prvku jasnou odpověď přesně k tomuto místu.
- Pojmenujte prvek, který vám dělá starosti, co nejkonkrétněji — třeba „cenová tabulka na stránce nabídky“.
- Po každé opravě zkontrolujte cíleně dotčený prvek na všech čtyřech velikostech zařízení, místo abyste se spoléhali na dojem z počítače.
- Podívejte se ve zprávě na označené snímky obrazovky — ukazují prvek ve stavu každé velikosti zařízení.
- Nechte vložený cizí obsah jako mapy nebo rezervační okna zkontrolovat zvlášť, protože se řídí vlastními pravidly.
FAQ
Co je viewport?
Viewport je viditelná zobrazovací oblast prohlížeče — zjednodušeně: okno, kterým návštěvníci web vidí. Na chytrém telefonu je úzký, na počítači široký. Kontrolní služba pracuje se čtyřmi profily viewportu o šířce 390, 768, 1440 a 1920 pixelů, protože se chování stránky se šířkou mění.
Proč prvek na mobilu mizí?
Mnoho webů na malých obrazovkách záměrně skrývá stavební bloky, aby ušetřily místo — někdy záměrně, někdy omylem kvůli nastavení šablony. Kontrola prvku to odhalí: hlásí pro každou velikost zařízení, zda je prvek přítomný a viditelný. Pokud chybí jen na mobilu, víte, že mobilní zobrazení je třeba nastavit zvlášť.
Dá se kontrolovat vložený obsah jako mapy nebo rezervační okna?
Ano, přesně k tomu se kontrola prvku hodí. Vložený obsah pochází od cizích poskytovatelů a řídí se vlastními pravidly — může být širší než zařízení nebo mít příliš malé ovládací plochy. Kontrola prvek měří na všech čtyřech velikostech zařízení a stav doloží označeným snímkem obrazovky pro každý profil.