Posuvník Vizuální Logo Posuvník Vizuální

Optimalizace pro dotyk — Mobil a tablet

Jak zajistit, aby posuvník fungoval perfektně na malých obrazovkách. Touch eventy, velikost grip handleru a citlivost.

10 min čtení Střední Březen 2026
Telefon v ruce s aplikací, dotykové gesto tahem po obrazovce, mobilní perspektiva

Proč je touch optimalizace tak důležitá

Posuvník před a po je skvělý prvek pro porovnávání obrázků. Jenže na mobilu se chová úplně jinak než na počítači. Dotykový vstup má své specifika — kurzor tu není, prsty jsou širší než myš a očekávání uživatelů jsou jiná.

Když se s tím nepočítá, uživatel se frustruje. Nedokáže přesně ovládat posuvník, chytí jej mimo grip handler, nebo se mu omylem spustí scroll stránky. Výsledek? Odejde na konkurenci. Proto je správná optimalizace pro dotek tak zásadní.

Na co se zaměřit

  • Velikost dotyková plocha minimálně 44×44 pixelů
  • Správné touch eventy místo mousemove
  • Absence zpoždění mezi dotykem a pohybem
  • Přesná detekce hranic obrázku

Touch eventy místo mouse eventů

To je první věc, kterou musíte pochopit. Na mobilu se nepoužívají mousemove a mousedown . Těch eventů prostě nejsou.

Místo toho se používají touchstart , touchmove a touchend . Každý z nich obsahuje objekt touches , který vám řekne přesnou pozici prstu na obrazovce.

Ale pozor — nesmíte je prostě nahradit. Touch eventy se chovají jinak. Když uživatel položí prst a hned jej zdvihne, dostanete touchstart a touchend . Nemusíte ani jeden touchmove . To je důležité pro správné ošetření.

Chytrý telefon s viditelnou dotykovou plochou grip handleru, minimální velikost 44x44 pixelů zvýrazněna

Velikost grip handleru — čím větší, tím lépe

Lidský prst má průměr okolo 10-15 milimetrů. To se na mobilu s hustotou pixelů 326 ppi (iPhone) nebo 420 ppi (Android) rovná přibližně 50-80 pixelům. Když si vezměte, že Apple a Google doporučují minimálně 44×44 pixelů, vidíte, že to není moc.

Grip handler by měl být alespoň 60 pixelů vysoký a 40 pixelů široký. Lépe 80×50. Uživatel potom chytí posuvník bez problémů, i když spěchá nebo jede v tramvaji. Zkušenost je pak mnohem příjemnější.

Navíc můžete handler vizuálně zvýraznit — změnit barvu, přidat stín nebo jemný zoom efekt, když se dotkne. To uživateli řekne: „Tady chyť a táhni.” Funguje to.

Informace o optimalizaci

Tento průvodce poskytuje vzdělávací informace o optimalizaci posuvníků pro dotykové zařízení. Konkrétní implementace se bude lišit v závislosti na vašem konkrétním projektu a cílové skupině uživatelů. Vždy testujte na reálných zařízeních, abyste zajistili nejlepší uživatelský zážitek.

Zpoždění a hladkost — CSS touch-action

Weby mají jednu zásadní vlastnost — jsou scrollovatelné. Když na mobilu položíte prst a táhnete, prohlížeč se snaží zjistit, jestli chcete scrollovat stránku nebo interagovat s prvkem. To trvá.

Právě proto existuje CSS vlastnost touch-action . Když na grip handler napíšete touch-action: none; , řeknete prohlížeči: „Přestaň čekat. To je čistě můj prvek, scroll se tady neděje.” Výsledek je okamžitý pohyb bez jakéhokoliv zpoždění.

Bez toho máte na mobilech typicky 100-150ms zpoždění. S tím je interakce hladká a přímo odpovídá pohybu prstu. Rozdíl je obrovský.

CSS kód s vlastností touch-action none a smooth transition, zvýrazněný v editoru s barvami syntaxe
Jakub Novotný

Jakub Novotný

Senior Frontend Developer a UX Designer

Senior frontend developer se 14 lety zkušeností v tvorbě interaktivních webových komponent a srovnávacích posuvníků pro moderní web.

Shrnutí — Jak na to

1

Použijte touch eventy

Nahraďte mousemove a mousedown touch eventy. Detekujte pozici z objektu touches.

2

Zvětšete grip handler

Minimálně 60×50 pixelů. Čím větší, tím lépe se chytá. Uživatelé budou vděční.

3

Přidejte touch-action

CSS vlastnost touch-action: none odstraní zpoždění. Interakce bude okamžitá a hladká.

4

Testujte na reálných zařízeních

Emulátor není dost. Vezměte si iPhone a Android. Cítíte rozdíl? Já ano.

Optimalizace pro dotyk není jen o technologii. Je to o respektu k uživateli. Když posuvník funguje hladce a přesně, uživatel si jej užije. Bude se těšit, až jej opět vidí. A to je přesně to, čeho chceme dosáhnout.