Prodleva při kliknutí na mobilu

Při ovládání webu na zařízeních s dotykovou obrazovkou se je možné setkat s lehkou prodlevou mezi kliknutím na odkaz nebo tlačítko a provedení akce.

Prodleva o délce cca 300 ms je způsobena tím, že po prvním stisku (ontouch) mobilní prohlížeče čekají, zda náhodou není cílem vyvolat dvoj-dotyk, který typicky slouží k zoomování.

Pokud je stránka responsivní a vejde se bez změny měřítka na displej, zdá se toto vyčkávání na gesto pro přiblížení/oddálení zbytečné.

Odstranění prodlevy po kliknutí

Mobilní Chrome a Firefox na Androidu

V mobilních versích prohlížeče Chrome 32 a novějších postačí přítomnost značky viewport:

<meta name="viewport" content="width=device-width">

Starší a některé další prohlížeče na Androidu reagují po dotyku okamžitě při zakázání zoomování:

<meta 
  name="viewport" 
  content="width=device-width, user-scalable=no"
>

Zakázat přibližování ale není z uživatelského hlediska úplně vhodná věc. I při responsivní podobě stránek se může hodit si například zvětšit obrázek. Populární mobilní aplikace Twitteru nebo Facebooku tento způsob používají.

Mobilní IE na Windows Phone

V mobilní IE slouží k okamžité odezvě CSS vlastnost touch-action.

Aplikovat ji jde na celý dokument (html):

html {
  -ms-touch-action: manipulation; /* IE10  */
  touch-action: manipulation;
}

Nebo jen na jednotlivé ovládací prvky.

a, button, .tlacitko {
  -ms-touch-action: manipulation; /* IE10  */
  touch-action: manipulation;
}

Či obecně pro všechna tlačítka, jiné formulářové prvky a odkazy:

a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation; /* IE10  */
  touch-action: manipulation;
}

Safari na iOS

Safari od verse 9.3 (březen 2016) vlastnost touch-action podporuje.

Ve starších Safari nějaký standardní způsob, jak prodlevu vypnout neexistuje.

Starší prohlížeče

Zrušit prodlevu čekání v nepodporovaných prohlížečí jde pouze na základě monitorování dotykových událostí a hádání, jestli uživatel opravdu chce vykonat akci tlačítka/odkazu. Existují na to hotová řešení:

„Využití“ prodlevy

Místo odstranění prodlevy ji někdy jde využít pro načítání dat – tj. začít načítat data na pozadí ihned při dotyku (ontouchstart). Obdobně jako u stisku a uvolnění tlačítka klasické myši.

Pochopitelně tento postup nejde použít vždy. Zvlášť u nevratných akcí na serveru by bylo takové spouštění v okamžiku, kdy ještě není jasné, jestli uživatel akci chce skutečně vyvolat, nebylo rozumné.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Responsivní web

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

Stránkování

Stránkování

Jak správně řešit stránkování na webové stránce.

Nekonečné rolování

Nekonečné scrollování

Je lepší nekonečné rolování, klasické stránkování nebo tlačítko „Zobrazit další“?

Proč nepoužívat hamburger menu

Proč hamburger menu nefunguje

Hamburger menu je oblíbený postup řešení responsivní navigace. Proč se mu vyhnout.

Jak zvolit šířku stránky

Jak široký web udělat

Jakou zvolit optimální šířku webové stránky.

Komentáře