Telefon lenker er en ting. Som et anker link som du trykker på (sannsynligvis) gå til en annen side, dette er lenker du trykker på for å ringe et nummer på en telefon-kompatibel enhet. De har eksistert i ganske lang tid. Likevel, de får meg mye forvirring. For eksempel, mange enheter vil ‘automagisk’ gjenkjenne telefonnumre og gjøre å knytte til oss, men ikke alltid.
Det er nok internett trafikk på mobile enheter og mange stasjonære pc-programmer som er i stand til å ringe, at det er verdt å vite mer om telefonen lenker.,
Standard Bruk
Vi har en kodebit for telefonen med linker på dette nettstedet som er blitt hengende rundt siden 2011:
<a href="tel:1-562-867-5309">1-562-867-5309</a>Dette fungerer også på tekst linker:
<a href="tel:1-562-867-5309">Click to Call!</a>tel: er ikke så mye en funksjon som det er en protokoll, mye på samme måte som http: og mailto: er protokoller for <a> – tag-funksjonen. Spec seg selv har ingenting å si om det, selv om HMTL5 gjorde gi støtte for egendefinerte protokoll handlers, som tillater en slik protokoll som skal brukes.,
Du lurer sikkert på hvorfor tel: kan betraktes som standard bruk i fravær av en offisiell spec på det. Du kan kreditere dette til det faktum at det var en foreslått standard så langt tilbake som i 2000, og senere vedtatt av iOS, noe som gjør det de facto vei å gå med rundt 2007. Det er andre phone-baserte protokoller (som vi kommer til senere), men vi vil fokusere på tel: gitt sin relative størrelsen.,
Nettleser Støtte
Vi se tel: dukke opp som en protokoll handler for lenker med ingen offisiell dokumentasjon; og der det er ingen dokumentasjon, ofte ser vi forskjeller i nettleseren støtte og atferd. Det er ikke å si at nettlesere ikke klarer å gjenkjenne <a> – koden selv. I stedet, nettlesere kan gjøre forskjellige beslutninger om hva du skal gjøre når koblingen er klikket på. For eksempel, en nettleser kan ta en annen app behov for å åpne og vil utløse en dialog som spør hvilken app å bruke. I andre tilfeller, koblingen kan ignoreres helt.,
| Nettleser | Gjør det link?,td>Ja | Starter telefonen ringer |
|---|---|---|
| iOS | Ja | Utløser alternativer for å ringe, melding, kopiere eller legge til nummeret i Kontakter-appen |
| Opera (OSX) | Ja | Utløser dialogboks som bekrefter bruk av en annen app |
| Opera (Windows) | Ja | Utløser en feilmelding som ikke gjenkjenner protokollen |
| Safari | Ja | Lanserer FaceTime |
Styling Telefonen Lenker
Styling telefon nummer er som alle andre linken., Faktisk, det vil arve standard styling for ankere:
a { color: orange; text-decoration: none;}La oss si at vi bare stiler til å gjelde telefon koblinger., Vi kan gjøre det med en pseudo-velgeren som søker ut tel: tekst i en gitt URL:
a { color: orange; text-decoration: none;}Tuts+ har en fin lure bruke ::before pseudo-velgeren for å legge til unicode telefonen karakter før nummeret som vises:
a:before { content: "\260e"; margin-right: 0.5em;}Alternative Telefon-Relaterte Lenker
Tror eller ikke, tel: er ikke den eneste måten å starte en samtale med en link. Her er noen andre tilpassede telefon-basert protokoll handlers til rådighet.,
-
callto:Akkurat somtel:men brukes til å starte samtaler via Skype app. - auto-oppdaget: Mange nettlesere for å automatisk oppdage et telefonnummer i HTML og knytte det opp til deg—ingen grunn til å endre markup. iOS, for eksempel, vil helt gjøre dette, selv om det ikke synes å være tilfelle for Chrome på Android.
-
sms:Hopp over samtalen og gå rett til tekstmelding. Dette synes å være mye mindre støttes enntel:er blant nettlesere, inkludert mobil., -
fax:Gå tilbake til fremtiden med faksmaskiner. Igjen, spotty pålitelighet.
Best Practices
Det er litt morsomt å snakke om beste praksis når det kommer til noe uten spesifikasjoner. Spec gir en kort uttalelse på «klikk for å ringe» ideen, men her er et par ting å huske på når du arbeider med telefonnumre og lenker.
Vurdere Sammenhengen
En telefon link kan gjøre for en utmerket call-to-action, spesielt på mobiltelefoner hvor det reduserer friksjon mellom innhold og samtale., På samme tid, telefon koblinger kan anses som en hindring på en desktop opplevelse hvor en telefonsamtale ville ikke være mulig hvis enheten ikke har en app som støtter det.
En idé ville være å lage en klasse som er spesielt for telefon koblinger og forsøke å vise eller skjule dem basert på hva vi vet om nettleseren. Modernizr og media queries er hendig her, men helt upresis.
Bruk landskoder
En landkode er ikke nødvendig, men kan være en fin touch for områder med internasjonal trafikk., Landskoder kan bli innledet av et + men som også ikke er nødvendig.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>Søk Motor Optimalisering
SEO eksperter kanskje har mer å legge til på dette enn det jeg gjør, men Google tilbyr et strukturert dataformat for lokale bedrifter, og med det vil gjøre telefon koblinger mer gjenkjennelig for søkeroboter, formaterer dem på søkeresultatsider på en måte som gjør den nummer mye mer handlingsrettet., Dudley Etasjes gir en god oversikt med følgende eksempel:
På den annen side ønsker søkemotorer for å følge telefonen koblinger, kan du legge til rel="nofollow" for å hindre koblinger blir fulgt, og indeksert. Dette kan være en god idé for noen link ikke blir utpekt som en oppfordring til handling siden søkeroboter ville være tilbøyelig til å prøve å følge den til ingensteds.,
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>Slå av Antall Oppdagelse i iOS
Hvis du har tenkt å legge telefonen lenker til koden, og deretter kan du også ønsker å vurdere å deaktivere iOS fra auto-oppdage telefonnumre og overordnede din stiler. Legg til følgende i dokumentet <head> for å slå den av:
<meta name="format-detection" content="telephone=no">