legăturile telefonice sunt un lucru. Ca un link de ancoră pe care îl atingeți (probabil) pentru a merge la o altă pagină, acestea sunt linkuri pe care le atingeți pentru a apela un număr de pe un dispozitiv capabil de telefon. Sunt pe aici de ceva timp. Cu toate acestea, îmi provoacă multă confuzie. De exemplu, multe dispozitive vor recunoaște automat numerele de telefon și vor face legătura pentru noi, dar nu întotdeauna.există suficient trafic web pe dispozitive mobile și o mulțime de aplicații desktop care sunt capabile să efectueze apeluri, că merită să știți mai multe despre legăturile telefonice.,

Utilizare Prestabilită

Avem un snippet pentru telefon legaturi de pe acest site care a fost agățat în jurul valorii din 2011:

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

Acest lucru, de asemenea, funcționează pe link-uri text:

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

tel: nu este atât de mult o caracteristică ca este un protocol, mult în același mod în care http: și mailto: sunt protocoale pentru <a> tag-ul caracteristică. Spec în sine nu are nimic de spus despre asta, deși HMTL5 a oferit suport pentru manipulatorii de protocoale personalizate, care permit utilizarea unui astfel de protocol.,

probabil vă întrebați de ce tel: poate fi considerată utilizare implicită în absența unei specificații oficiale. Puteți credita acest lucru pentru faptul că a fost un standard propus încă din 2000 și ulterior adoptat de iOS, făcându-l modul de facto de a merge cu aproximativ 2007. Există și alte protocoale bazate pe telefon (la care vom ajunge mai târziu), dar ne vom concentra pe tel: având în vedere importanța sa relativă.,

suport Browser

vedem tel: pop-up ca un handler de protocol pentru link-uri cu nici o documentație oficială; și în cazul în care nu există nici o documentație, vom vedea de multe ori diferențe în suport browser și comportament. Asta nu înseamnă că browserele nu reușesc să recunoască eticheta <a> în sine. În schimb, browserele pot lua decizii diferite cu privire la ce să facă atunci când se face clic pe acel link. De exemplu, un browser poate presupune că o altă aplicație trebuie să se deschidă și va declanșa un dialog care va întreba Ce aplicație să utilizeze. În alte cazuri, link-ul poate fi ignorat cu totul.,

Browser e link-ul?,td>Da Inițiază telefon
iOS Da Declanșează opțiuni pentru apel, mesaj, copia sau puteți adăuga numărul la agenda
Opera (OSX) Da Declanșează de dialog confirmând utilizat de o altă aplicație
Opera (Windows) Da Declanseaza o eroare de dialog care nu recunoaște protocolul
Safari Da Lansează FaceTime

Styling Telefon Link-uri

Styling numere de telefon este la fel ca orice alt link., De fapt, va moșteni stilul implicit pentru ancore:

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

să spunem că doar stiluri de aplicat legăturilor telefonice., Putem face asta cu o pseudo selector care caută tel: text într-un anumit URL:

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

Tuts+ are un truc frumos folosind ::before pseudo selector pentru a adăuga unicode telefon personaj înainte numărul este afișat:

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

Telefon Alternative Legate de Link-uri

Credeți sau nu, tel: nu este singura modalitate de a iniția un apel telefonic cu un link. Iată câteva alte Handlere de protocol bazate pe telefon personalizate la dispoziția noastră.,

  • callto: Exact ca tel: dar folosit pentru a iniția apeluri prin intermediul aplicației Skype.
  • auto-detectat: multe browsere vor detecta automat un număr de telefon în HTML și îl vor conecta pentru dvs.—nu este nevoie să schimbați marcajul. iOS, de exemplu, va face în totalitate acest lucru, deși nu părea să fie cazul pentru Chrome pe Android.
  • sms: săriți apelul și mergeți direct la mesajul text. Acest lucru pare a fi mult mai puțin acceptat decât tel: este printre browsere, inclusiv mobil.,
  • fax: du-te înapoi la viitor cu aparate de fax. Din nou, fiabilitate spotty.

cele mai bune practici

este cam amuzant să vorbim despre cele mai bune practici atunci când vine vorba de ceva fără specificații. Spec oferă o scurtă opinie cu privire la ideea” faceți clic pentru a apela”, dar aici sunt câteva lucruri să aibă în vedere atunci când se lucrează cu numere de telefon și link-uri.

luați în considerare contextul

un link telefonic poate face un excelent apel la acțiune, în special pe telefoanele mobile, unde reduce frecarea dintre conținut și apel., În același timp, legăturile telefonice ar putea fi considerate o piedică într-o experiență desktop în care un apel telefonic nu ar fi posibil dacă dispozitivul nu are o aplicație care să o accepte.o idee ar fi să creăm o clasă special pentru legăturile telefonice și să încercăm să le afișăm sau să le ascundem pe baza a ceea ce știm despre browser. Modernizr și interogările media sunt la îndemână aici, deși total imprecise.

utilizați codurile de țară

un cod de țară nu este necesar, dar ar putea fi o notă plăcută pentru site-urile cu trafic internațional., Codurile de țară pot fi precedate de un +, dar și acest lucru nu este necesar.

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

Optimizarea Motorului de Căutare

SEO experți ar putea avea mai mult pentru a adăuga la asta decât mine, dar Google oferă un mod structurat format de date pentru afacerile locale și utilizarea se va face telefonic link-uri mai ușor de recunoscut pentru crawlerele, formatare-le pe paginile cu rezultatele căutării într-un mod care face ca numărul mult mai concretă., Dudley Etaje oferă o imagine de ansamblu excelentă cu următorul exemplu:

Pe de alta parte de dorinta de motoarele de căutare să urmeze telefon, link-uri, puteți adăuga rel="nofollow" pentru a descuraja link-uri de a fi urmat și indexate. Aceasta ar putea fi o idee bună pentru ca orice link să nu fie desemnat ca un apel la acțiune, deoarece crawlerele web ar fi înclinate să încerce să o urmeze nicăieri.,

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

oprirea Numărul de Detectare în iOS

Dacă aveți de gând să adăugați legături telefonice la marcaj, apoi, de asemenea, poate doriți să ia în considerare dezactivarea iOS de la auto-detectarea numere de telefon și imperative stiluri. Adăugați următoarele la documentul <head> pentru a opri asta:

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

bibliografie