Share
Cette astuce montre comment créer des liens de numéros de téléphone avec HTML. Les techniques de cette astuce fonctionnent à la fois sur les appareils Android et iPhone et peuvent grandement améliorer l'expérience des visiteurs de sites Web mobiles..
Si vous avez besoin d'aide supplémentaire pour tout aspect du développement mobile, n'hésitez pas à faire appel à l'un des experts d'Envato Studio. Sinon, lisez la suite pour les instructions.
Par défaut, sur iOS et Android, le navigateur de l'appareil crée "magiquement" des liens hors texte interprétés comme un numéro de téléphone. Lorsque l'utilisateur appuie sur l'un de ces liens, l'application du téléphone de l'appareil démarre. Les modèles de numéros de téléphone exacts qui seront automatiquement transformés en liens varient d’une plate-forme à l’autre, mais j’en ai énuméré plusieurs ci-dessous:
Si votre site ou votre application utilise l'un des formats multi-appareils ci-dessus, vos utilisateurs devraient déjà pouvoir passer des appels rapidement en appuyant simplement sur le texte..
La recette pour créer vos propres liens de numéros de téléphone est simple. Au lieu d'utiliser un lien normal basé sur le protocole HTTP / S ou le système de fichiers, vous pouvez utiliser le protocole "tel:". Cela fonctionne comme un lien normal, mais au lieu du href attribut pointant vers une URL ou un fichier, vous ajoutez soit "tel:" soit "tel: //" à un numéro de téléphone.
Consultez les exemples suivants pour voir cela en action:
Si vous souhaitez parler, appelez-moi!
+1 (555) 555-5555
REMARQUE: le code ci-dessus doit être testé sur un périphérique physique. Cela ne fonctionnera pas sur l'émulateur de SDK iOS.
Le dernier exemple est particulièrement intéressant. De nombreux développeurs Web n'ont pas le luxe d'effectuer des tests approfondis de périphériques mobiles sur iPhone et Android. Il serait donc facile de passer à côté du fait que certains des formats de téléphone répertoriés au début de cette astuce ne seront pas reconnus automatiquement sur tous les dispositifs.
Étant donné que les formats de téléphone reconnus peuvent varier d’un appareil à l’autre, je vous suggère de toujours envelopper vos numéros de téléphone dans un lien précédé du préfixe "tel: //". Cela permettra non seulement de s'assurer que le plus grand nombre d'appareils sera connecté à l'application téléphonique, mais cela semble également être une approche plus explicite, accessible et sémantique de la gestion des liens téléphoniques..
Bien sûr, si le contenu que vous créez peut être visualisé sur un appareil sans téléphone, vous devez utiliser une langue côté serveur pour ajouter uniquement les liens "tel:" si nécessaire ou vérifier le type d'appareil avec JavaScript et ajouter les liens à la page progressivement, le cas échéant.
Pour Android et iPhone, vous pouvez facilement désactiver la liaison automatique de numéros de téléphone avec les balises méta suivantes:
Cette balise méta désactivera la liaison automatique des numéros de téléphone tout en vous permettant de créer manuellement des liens de numéros de téléphone à l'aide de la méthode "tel: //" décrite ci-dessus..
Voilà pour ce tutoriel! Si vous souhaitez approfondir votre développement mobile, consultez la vaste sélection de modèles utiles sur le marché Envato. Il existe des milliers de choix, à la fois pour Android et iOS.
Modèles d'applications mobiles sur le marché Envato
Accentsconagua
+1 (555) 555-5555