telefonní odkazy jsou věc. Stejně jako kotevní odkaz, na který klepnete (pravděpodobně) přejděte na jinou stránku, jedná se o odkazy, na které klepnete a zavoláte číslo na zařízení schopné telefonu. Jsou tu už nějakou dobu. Přesto mi způsobují spoustu zmatků. Například mnoho zařízení automaticky rozpozná telefonní čísla a provede propojení pro nás, ale ne vždy.

Tam je dost webového provozu na mobilních zařízeních a spoustu stolních aplikací, které jsou schopny volání, že to stojí za to vědět více o telefonu odkazy.,

Default Použití

Máme tu snippet pro telefon, odkazy na tomto webu, která byla visí kolem roku 2011:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Tento také pracuje na textové odkazy:

<a href="tel:1-562-867-5309">Click to Call!</a>

tel: není ani tak funkce, jako je protokol, mnohem stejným způsobem, že http: mailto: jsou protokoly pro <a> tag funkce. Samotný spec o tom nemá co říci, ačkoli HMTL5 poskytoval podporu pro vlastní manipulátory protokolů, které umožňují použití takového protokolu.,

pravděpodobně vás zajímá, proč tel: lze považovat za výchozí použití, pokud na něm není oficiální specifikace. Můžete kreditní to k tomu, že to byl návrh standardu již v roce 2000 a později přijat iOS, což je de facto způsob, jak jít zhruba o roce 2007. Existují i jiné protokoly založené na telefonu (ke kterým se dostaneme později), ale vzhledem k jeho relativní výtečnosti se zaměříme na tel:.,

Podpora Prohlížeče

tel: pop-up jako protocol handler pro odkazy s žádnou oficiální dokumentaci; a tam, kde není dokumentace, jsme často vidět rozdíly v prohlížeči podporu a chování. To neznamená, že prohlížeče nedokážou rozpoznat značku <a>. Místo toho mohou prohlížeče činit různá rozhodnutí o tom, co dělat, když na tento odkaz kliknete. Například prohlížeč může předpokládat, že je třeba otevřít jinou aplikaci a spustí dialog s dotazem, kterou aplikaci použít. V ostatních případech může být odkaz zcela ignorován.,

Browser má odkaz?,td>Ano Iniciuje hovor
iOS Ano Aktivuje možnosti pro volání, zprávy, kopírování nebo přidat číslo do Kontaktů aplikace
Opera (OSX) Ano Spustí se dialogové okno potvrzující použití další aplikace
Opera (Windows) Ano Spustí dialogové okno chyby, který neuznává protokol
Safari Ano Spustí FaceTime

Styling Telefonu Odkazy

Styling telefonních čísel je stejně jako jakýkoli jiný odkaz., Ve skutečnosti zdědí výchozí styling pro kotvy:

a { color: orange; text-decoration: none;}

řekněme, že se na telefonní odkazy aplikujeme pouze styly., Můžeme dělat, že s pseudo volič, který hledá tel: text v daném URL:

a { color: orange; text-decoration: none;}

Tuts+ má pěkný trik pomocí ::before pseudo selektor přidat unicode telefon znak před číslem se zobrazí:

a:before { content: "\260e"; margin-right: 0.5em;}

Alternativní Telefon-Související Odkazy

Věřte nebo ne, tel: je to jediný způsob, jak zahájit hovor s odkazem. Zde je několik dalších vlastních protokolů založených na telefonu, které máme k dispozici.,

  • callto: přesně jako tel: ale používá se k iniciaci hovorů prostřednictvím aplikace Skype.
  • auto-detekována: Mnoho prohlížečů automaticky detekuje telefonní číslo v HTML a link to pro vás—není třeba měnit značky. například iOS to zcela udělá, i když se nezdálo, že by tomu bylo v případě Chrome v systému Android.
  • sms: přeskočte hovor a přejděte přímo na textovou zprávu. Zdá se, že je to mnohem méně podporované než tel: je mezi prohlížeči, včetně mobilních.,
  • fax: vraťte se do budoucnosti pomocí faxů. Opět platí, že špinavá spolehlivost.

osvědčené postupy

je to docela vtipné mluvit o osvědčených postupech, pokud jde o něco bez specifikací. Spec dává stručný názor na myšlenku“ kliknout na volání“, ale zde je několik věcí, které je třeba mít na paměti při práci s telefonními čísly a odkazy.

Zvážit Kontext,

telefonní linku, můžete udělat pro vynikající výzvu k akci, a to zejména na mobilní telefony, kde to snižuje tření mezi obsahem a volání., Současně by telefonní odkazy mohly být považovány za překážku při stolním zážitku, kdy by telefonní hovor nebyl možný, pokud zařízení postrádá aplikaci, která jej podporuje.

Jeden nápad by bylo vytvořit třídu speciálně pro telefon odkazy a pokusit se ukázat, nebo skrýt na základě toho, co víme o prohlížeči. Modernizr a mediální dotazy jsou zde užitečné, i když naprosto nepřesné.

použijte kódy zemí

kód země není vyžadován, ale může být příjemným dotykem pro weby s mezinárodním provozem., Kódy zemí mohou předcházet +, ale to také není nutné.

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

Optimalizace pro vyhledávače

SEO odborníků může mít více přidat na to, než já, ale Google nabízí strukturovaný formát dat pro místní podniky, a používat to bude telefonní spojení více rozpoznatelné roboti, formátování je na stránkách výsledků vyhledávání tak, že je to číslo mnohem více žalovatelné., Dudley Podlaží poskytuje vynikající přehled s následující příklad:

Na druhou stranu, že chce vyhledávače za telefonní spojení, můžete přidat rel="nofollow" odradit odkazy z sledováni a indexovány. To by mohlo být dobrým nápadem pro jakýkoli odkaz, který není označen jako výzva k akci, protože webové prohledávače by měly tendenci se ho snažit sledovat nikde.,

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

vypnutí Detekce Počet v iOS

Pokud máte v plánu přidat telefonní odkazy na vaše značky, pak můžete také chtít, aby zvážila zákaz iOS z auto-detekci, telefonní čísla a převažující vaše styly. Přidejte následující dokument <head> pro vypnutí:

<meta name="format-detection" content="telephone=no">

další čtení