Odstranění zvýraznění dotyku na odkazech na WP a iOS

Při testování vašich webů na mobilních webových prohlížečích se můžete dovědět, že Windows Phone a iOS automaticky aplikují speciální zvýrazňování ve chvíli, kdy uživatel klepne na jakýkoliv odkaz na stránce – jde o lehké zašednutí celého prostoru na kterém je odkaz zobrazen. Přestože toto chování může být v mnoha případech užitečné, hlavně pro to, aby uživatel věděl na jaký odkaz doopravdy klepnul, v jiných situacích to může být poměrně nežádoucí a nepřívětivé vůči designu stránky.

Jak zvýrazňování zabránit? Pojďme se podívat na řešení pro oba systémy!

Windows Phone

Windows Phone 8 bohužel nenabízí žádné řešení přímo přes CSS. Pro odstranění zvýraznění musíte na stránce v uvnitř elementu <head> uvést následující speciální meta tag.

Proč mluvím konkrétně o Windows Phone 8? Podpora pro tento specifický meta tag není na Windows Phone 7 k dispozici (ani s nejnovější aktualizací 7.8) a mobilní IE 9 jej jednoduše nepodporují. Zde budete muset udělat důležité rozhodnutí. Pokud můžete žít s faktem, že na Windows Phone 7 bude zvýrazňování pokračovat, zjednodušíte si život. Pokud je ale tento problém pro vás opravdu kritický a máte rádi výzvy, můžete na stránku přidat poměrně komplikovanou JavaScriptovou knihovnu od Andrewa Trice pojmenovanou WinPhone-NoGrayBox. Autor napsal na toto téma skvělý článek, který přímo obsahuje odkaz na GitHub knihovny.

iOS

Řešení problému v mobilním Safari na iOS je překvapivě jednodušší. Pro odstranění dotykového zvýraznění aplikujte následující stylovou definici ve vašem CSS:

Toto je vlastnost specifická pro webkit prohlížeč a umožňuje vlastně nastavit zvýraznění libovolnou barvu. Pro naše účely se ale nejvíce hodí plně průhledná černá barva.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*