Share
Deze snelle tip laat zien hoe je telefoonnummerkoppelingen kunt maken met HTML. De technieken in deze tip werken op zowel Android- als iPhone-apparaten en kunnen de ervaring van bezoekers van mobiele websites aanzienlijk verbeteren.
Als u extra hulp nodig hebt bij elk aspect van mobiele ontwikkeling, kunt u een van de experts van Envato Studio inschakelen. Lees anders verder voor de instructies.
Standaard op iOS en Android maakt de apparaatbrowser op magische wijze koppelingen zonder tekst die worden geïnterpreteerd als een telefoonnummer. Wanneer de gebruiker op een van deze koppelingen tikt, wordt de telefoontoepassing van het apparaat gestart. De exacte nummerpatronen die automatisch in links worden omgezet, verschillen per platform, maar ik heb een aantal van de patronen vermeld die ik hieronder met succes heb getest:
Als uw site of app een van de bovenstaande indelingen voor meerdere apparaten gebruikt, moeten uw gebruikers al snel kunnen bellen door simpelweg op de tekst te tikken.
Het recept voor het maken van uw eigen telefoonnummer is eenvoudig. In plaats van een normale koppeling op basis van het HTTP / S-protocol of het bestandssysteem te gebruiken, kunt u het protocol "tel:" gebruiken. Dit werkt net als een normale link, alleen in plaats van de href attribuut wijst naar een URL of bestand, u plaatst "tel:" of "tel: //" op een telefoonnummer.
Bekijk de volgende voorbeelden om dit in actie te zien:
Als je wilt praten, bel me dan!
+1 (555) 555-5555
OPMERKING: de bovenstaande code moet op een fysiek apparaat worden getest. Het werkt niet op de iOS SDK-emulator.
Het laatste voorbeeldfragment is vooral het vermelden waard. Veel webontwikkelaars hebben niet de luxe om uitgebreide testen van mobiele apparaten uit te voeren op zowel iPhone als Android, dus het zou gemakkelijk zijn om te missen dat sommige van de telefoonformaten die aan het begin van deze tip worden vermeld, niet automatisch worden herkend op alle apparaten.
Omdat de herkende telefoonindelingen van apparaat tot toestel kunnen verschillen, raad ik aan altijd uw telefoonnummers in een koppeling met het voorvoegsel 'tel: //' te plaatsen. Niet alleen zorgt dit ervoor dat het grootste aantal apparaten verbinding maakt met de telefoontoepassing, maar dit lijkt ook een meer expliciete, toegankelijke en semantische benadering voor het afhandelen van telefoonverbindingen..
Als de inhoud die u aan het maken bent op een apparaat zonder telefoon wordt bekeken, zou u natuurlijk een taal aan de serverkant moeten gebruiken om alleen de "tel:" -links toe te voegen, of moet u het apparaattype controleren met JavaScript en voeg de links naar de pagina geleidelijk toe, indien van toepassing.
Voor zowel Android als iPhone kunt u automatische telefoonnummeraantekening eenvoudig uitschakelen met de volgende metatag:
Met deze metatag wordt het automatisch koppelen van telefoonnummers uitgeschakeld, terwijl je nog steeds handmatig telefoonnummerkoppelingen kunt maken met de hierboven beschreven "tel: //" -methode.
Dat is het voor deze tutorial! Als u uw mobiele ontwikkeling verder wilt ontwikkelen, bekijk dan de enorme selectie nuttigeяapp-sjablonen op Envato Market. Er zijn duizenden om uit te kiezen, voor zowel Android als iOS.
Sjablonen voor mobiele apps op Envato Market
Accentsconagua
+1 (555) 555-5555