Share
Detta snabba tips visar hur man skapar telefonnummerlänkar med HTML. Teknikerna i detta tips fungerar på både Android- och iPhone-enheter och kan kraftigt förbättra upplevelsen av mobila webbplatsbesökare.
Om du behöver extra hjälp med någon aspekt av mobilutveckling, var god att beställa en av Envato Studio-experterna. I annat fall läs vidare för instruktionerna.
Som standard på IOS och Android, skapar enhetsbläddraren "magiskt" länkar utifrån text tolkad som ett telefonnummer. När användaren tappar en av dessa länkar, startar enhetens telefonprogram. De exakta telefonnummermönstren som automatiskt omvandlas till länkar varierar mellan plattformar, men jag har listat flera av de mönster som jag har testat nedan:
Om din webbplats eller app använder ett av de övergripande formaten ovan, borde dina användare redan snabbt ringa samtal bara genom att trycka på texten.
Receptet för att skapa egna telefonnummer länkar är enkelt. I stället för att använda en vanlig länk baserad på HTTP / S-protokollet eller filsystemet kan du använda "tel:" -protokollet. Det fungerar som en vanlig länk, bara i stället för href attribut pekar på en webbadress eller fil, förordnar du antingen "tel:" eller "tel: //" till ett telefonnummer.
Kolla in följande exempel för att se detta i åtgärd:
Om du vill prata, ring mig!
+1 (555) 555-5555
OBS: Ovanstående kod ska testas på en fysisk enhet. Det fungerar inte på iOS SDK-emulatorn.
Det sista exemplet snippet är särskilt värt att notera. Många webbutvecklare har inte lyxen att utföra omfattande test av mobila enheter på både iPhone och Android, så det skulle vara lätt att missa det faktum att några av de telefonformat som anges i början av detta tips inte kommer att identifieras automatiskt på alla enheter.
Eftersom telefonformat som erkänns kan variera mellan enheter, föreslår jag alltid att du sätter in dina telefonnummer i en länk med prefixet "tel: //". Det gör inte bara det så att det största antalet enheter kommer att länka till telefonprogrammet, men det verkar också vara ett tydligare, tillgängligt och semantiskt tillvägagångssätt för hantering av telefonlänkar.
Om innehållet du skapar kanske visas på en enhet utan en telefon, bör du antingen använda ett språk på serverns sida för att bara lägga till länkarna "tel:" när det behövs, eller du bör kontrollera enhetstypen med JavaScript och Lägg till länkarna till sidan gradvis när det är tillämpligt.
För både Android och iPhone kan du enkelt inaktivera det automatiska telefonnumret som länkar till följande metatag:
Den här metakoden kommer att inaktivera automatisk telefonlänkning medan du fortfarande tillåter att du manuellt skapar telefonnummerlänkar med hjälp av "tel: //" -metoden som beskrivs ovan.
Det är det för den här handledningen! Om du vill ta din mobila utveckling vidare, kolla in det stora urvalet av usefuljiapp mallar på Envato Market. Det finns tusentals att välja mellan, både för Android och iOS.
Mobil appmallar på Envato Market
Accentsconagua
+1 (555) 555-5555