telefonforbindelser er en ting. Ligesom et ankerlink, du trykker på for at (sandsynligvis) gå til en anden side, Dette er links, du trykker på for at ringe til et nummer på en telefon-kompatibel enhed. De har eksisteret i temmelig lang tid. Endnu, de forårsager mig en masse forvirring. For eksempel genkender mange enheder automatisk telefonnumre og gør linket for os, men ikke altid.
Der er nok web trafik på mobile enheder, og masser af desktops apps, der er i stand til at foretage opkald, at det er værd at vide mere om telefonen links.,
Standard Brug
Vi har et kodestykke for telefonen links på dette websted, der er blevet hængende siden 2011 er:
<a href="tel:1-562-867-5309">1-562-867-5309</a>Dette virker også på tekst-links:
<a href="tel:1-562-867-5309">Click to Call!</a>tel: der er ikke så meget en funktion, som det er en protokol, meget på samme måde som http: og mailto: er protokoller for <a> – tag-funktion. Spec selv har intet at sige om det, selvom HMTL5 gav støtte til brugerdefinerede protokolhåndterere, som gør det muligt at bruge en sådan protokol.,
du undrer dig sandsynligvis over, hvorfor tel: kan betragtes som standardbrug i mangel af en officiel spec på den. Du kan kreditere dette til det faktum, at det var en foreslået standard så langt tilbage som 2000 og senere vedtaget af iOS, hvilket gør det de facto vej at gå omkring 2007. Der er andre telefonbaserede protokoller (som vi kommer til senere), men vi fokuserer på tel: i betragtning af dens relative prominens.,
Browser Understøtter
se tel: pop-up som en protokol handler om links som ikke har nogen officiel dokumentation, og hvor der ikke er nogen dokumentation, vi ofte ser forskelle i browser understøtter og adfærd. Det er ikke at sige, at bro .sere ikke genkender <a> tag selv. I stedet kan Bro .sere træffe forskellige beslutninger om, hvad de skal gøre, når der klikkes på linket. For eksempel kan en bro .ser antage, at en anden app skal åbnes og vil udløse en dialog, der spørger, hvilken app der skal bruges. I andre tilfælde kan linket ignoreres helt.,
| Browser | Er det link?,td>Ja | Initierer telefonopkald |
|---|---|---|
| iOS | Ja | Udløser muligheder for at ringe, besked, kopiere eller føje nummeret til telefonbogen app |
| Opera (OSX) | Ja | Udløser dialogboks, der bekræfter brug af anden app |
| Opera (Windows) | Ja | Udløser en fejl dialog, der ikke anerkender den protokol |
| Safari | Ja | Lancerer FaceTime |
Styling Telefon Links
Styling telefon numre er som alle andre link., Faktisk vil det arve standard styling for ankre:
a { color: orange; text-decoration: none;} lad os sige, at vi kun stilarter, der gælder for telefonlinks., Vi kan gøre det med en pseudo-vælgeren, der søger ud tel: tekst i en bestemt URL-adresse:
a { color: orange; text-decoration: none;}Tuts+ har et godt trick at bruge ::before pseudo-vælgeren for at tilføje unicode telefon tegn før nummeret vises:
a:before { content: "\260e"; margin-right: 0.5em;}Alternativ Telefon-Relaterede Links
Tro det eller ej, tel: er ikke den eneste måde at indlede et opkald med et link. Her er et par andre brugerdefinerede telefonbaserede protokolhåndterere til vores rådighed.,
-
callto:Præcis somtel:men bruges til at indlede opkald via Skype app. - auto-opdaget: mange bro .sere registrerer automatisk et telefonnummer i HTML ‘ en og linker det op for dig—ingen grund til at ændre markeringen. iOS, for eksempel, vil helt gøre dette, selvom det ikke synes at være tilfældet for Chrome på Android.
-
sms:Spring opkaldet over og gå direkte til SMS. Dette synes at være meget mindre understøttet endtel:er blandt bro .sere, herunder mobil., -
fax:gå tilbage til fremtiden med FA .maskiner. Igen, spotty pålidelighed.
Bedste Praksis
Det er lidt sjovt at tale om den bedste praksis, når det kommer til noget uden specifikationer. Spec giver en kort udtalelse om ideen” klik for at ringe”, men her er et par ting, du skal huske på, når du arbejder med telefonnumre og links.
overvej konteksten
et telefonlink kan give en fremragende opfordring til handling, især på mobiltelefoner, hvor det reducerer friktionen mellem indholdet og opkaldet., Samtidig kan telefonforbindelser betragtes som en hindring på en desktop-oplevelse, hvor et telefonopkald ikke ville være muligt, hvis enheden mangler en app, der understøtter den.
en ID.ville være at oprette en klasse specifikt til telefonforbindelser og forsøge at vise eller skjule dem baseret på hvad vi ved om bro .seren. Moderni Andr og medier forespørgsler er praktisk her, men helt upræcise.
brug landekoder
en landekode er ikke påkrævet, men kan være et godt præg for sitesebsteder med international trafik., Landekoder kan foregå med en + , men det er heller ikke nødvendigt.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>Search Engine Optimization
SEO eksperter, der måske har mere at tilføje til dette, end jeg gør, men Google tilbyder et struktureret dataformat for lokale virksomheder og bruge det vil gøre telefon links mere genkendelige for webcrawlere, formatere dem på sider med søgeresultater på en måde, der gør nummeret meget mere handlingsrettede., Dudley Etager, der giver et godt overblik med følgende eksempel:
På den anden side ønsker søgemaskiner til at følge telefon links, kan du tilføje rel="nofollow" for at modvirke links fra at være fulgt, og indekseret. Dette kan være en god ide for ethvert link, der ikke betegnes som en opfordring til handling, da crawebcra .lere ville være tilbøjelige til at forsøge at følge det til ingen steder.,
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>slukning Antal Opdagelse i iOS
Hvis du planlægger at tilføje telefonen links til din markup, så du kan også overveje at deaktivere iOS fra auto-registrerer telefonnumre og tilsidesætte dit stilarter. Tilføj følgende dokumentet <head> for at slå det fra:
<meta name="format-detection" content="telephone=no">