web-dev-qa-db-fra.com

Cliquez pour appeler html

Je souhaite utiliser la balise html5 sur mon site Web pour la vue mobile lorsque l'utilisateur clique sur ce lien à partir d'un appareil mobile, il passe un appel sur le numéro indiqué.

<p>Book now, call <a href="tel:01234567890">01234 567 890</a></p>

Que dois-je faire pour masquer ce lien lorsque l'utilisateur mobile n'est pas en html5?. Je suis passé par modenizer mais semble ne pas détecter l'attribut link. http://www.tutorialspoint.com/html5/html5_modernizr.htm

Toute suggestion? Ce bouton n'apparaît que lorsque mon site Web est ouvert sur un appareil mobile et que je souhaite masquer ce lien lorsqu'il est ouvert dans un ancien appareil mobile.

html5cross-browsermodernizr
43
Umair Rana

tl; dr Que faire dans les temps modernes (2018)? Supposons que tel: soit pris en charge, utilisez-le et oubliez tout le reste.

Le schéma tel: URI RFC5431 (ainsi que sms: mais également feed:, maps:, youtube: et autres) est géré par gestionnaires de protocole (comme mailto: et http: sont).

Ils ne sont pas liés à la spécification HTML5 (il a été à partir des années 9 et documenté pour la première fois en 2k avec - RFC2806 ) alors vous ne pouvez pas vérifier leur support en utilisant des outils tels que modernizr . Un gestionnaire de protocole peut être installé par une application (par exemple , Skype installe un gestionnaire de protocole callto: avec le même sens et le même comportement que tel:, mais il ne s'agit pas d'une norme. ), supporté nativement par le navigateur ou installé (avec certaines limitations) par le site Web lui-même.

Ce que HTML5 a ajouté, c'est la prise en charge de l'installation de gestionnaires de protocole Web personnalisés (avec registerProtocolHandler() et les fonctions associées), ce qui simplifie également la vérification de leur prise en charge via la fonction isProtocolHandlerRegistered().

Il existe des moyens simples de déterminer s’il existe ou non un gestionnaire: " Comment détecter les gestionnaires de protocole du navigateur? ).

En général, ce que je suggère est:

  1. Si vous exécutez sur un appareil mobile, vous pouvez sans risque supposer que tel: est pris en charge (oui, ce n'est pas vrai pour très anciens appareils, mais IMO, vous pouvez les ignorer).
  2. Si JS n'est pas actif, ne faites rien.
  3. Si vous utilisez des navigateurs de bureau, vous pouvez utiliser l’une des techniques décrites dans la publication liée pour déterminer si elle est prise en charge.
  4. Si tel: n'est pas pris en charge, changez les liens pour utiliser callto: et répétez la vérification décrite dans 3 .
  5. Si tel: et callto: ne sont pas pris en charge (ou - dans un navigateur de bureau - vous ne pouvez pas détecter leur support), supprimez simplement ce lien en remplaçant l'URL dans href avec javascript:void(0) et (si le numéro n’est pas répété dans la longueur du texte), le numéro de téléphone dans title. Ici, les microdonnées HTML5 n’aideront pas les utilisateurs (uniquement les moteurs de recherche). Notez que les versions les plus récentes de Skype gèrent à la fois callto: et tel:.

Veuillez noter que (du moins sur les dernières versions de Windows), il existe toujours un gestionnaire de protocole enregistré - (faux) - App Picker (cette fenêtre agaçante qui vous permet de choisir avec quelle application vous voulez utiliser. ouvrir un fichier inconnu). Cela risque de faire disparaître vos tests. Si vous ne souhaitez pas traiter l'environnement Windows comme un cas particulier, simplifiez ce processus de la manière suivante:

  1. Si vous utilisez un périphérique mobile, supposez que tel: est pris en charge.
  2. Si vous utilisez un ordinateur de bureau puis remplacez tel: par callto:. puis déposez tel: ou laissez-le tel quel (en supposant qu'il existe de bonnes chances que Skype soit installé).
70
Adriano Repetti