html5 - telefonico - Haz clic para llamar a html

link para llamar por telefono html

Question

Quiero utilizar la etiqueta html5 en mi sitio web para ver dispositivos móviles cuando el usuario haga clic en este enlace desde el dispositivo móvil y haga una llamada al número indicado.

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

¿Qué debo hacer para ocultar este enlace cuando el usuario móvil no es html5? He pasado por modenizer pero parece que no detectará el atributo de enlace. http://www.tutorialspoint.com/html5/html5_modernizr.htm

¿Cualquier sugerencia? Este botón solo aparecerá cuando mi sitio web se abra en un dispositivo móvil y para dispositivos móviles. Quiero ocultar este enlace cuando se abra en un dispositivo móvil antiguo.

Answer 1

El esquema tel: URI (así como sms: pero también feed: maps: youtube: y otros) es manejado por manejadores de protocolo (como mailto: y http: are).

No están relacionados con la especificación HTML5 (AFAIK Apple introdujo el tel: soporte alrededor del 2007 y también los dispositivos Android los soportan desde hace mucho tiempo), entonces no se puede verificar su soporte usando herramientas como modernizr . Un controlador de protocolo puede ser instalado por una aplicación (por ejemplo, Skype instala un controlador de protocolo callto: con el mismo significado y comportamiento de tel: callto: , con soporte nativo del navegador o instalado (con algunas limitaciones) por el propio sitio web.

Lo que HTML5 agregó es soporte para instalar manejadores de protocolos basados ​​en web personalizados (con registerProtocolHandler() y funciones relacionadas) simplificando también la verificación de su soporte a través de la función isProtocolHandlerRegistered() .

Hay algunas formas fáciles de determinar si hay un controlador o no: " ¿Cómo detectar los manejadores de protocolo del navegador? ).

En general, lo que sugiero es:

1. Si está ejecutando en un dispositivo móvil, puede asumir con seguridad que tel: es compatible (sí, no es cierto para dispositivos muy antiguos, pero IMO puede ignorarlos).
2. Si JS no está activo, entonces no haga nada.
3. Si está ejecutando navegadores de escritorio, puede usar una de las técnicas en la publicación vinculada para determinar si es compatible.
4. Si tel: no es compatible, cambie los enlaces para usar callto: y repita check desctibed en 3 .
5. Si tel: y callto: no son compatibles (o - en un navegador de escritorio - no puede detectar su compatibilidad), simplemente elimine ese enlace reemplazando URL en href con javascript:void(0) y (si el número no se repite) en lapso de texto) poner, número de teléfono en el title . Aquí los microdatos HTML5 no ayudarán a los usuarios (solo a los motores de búsqueda). Tenga en cuenta que las versiones más nuevas de Skype manejan tanto callto: como tel:

Tenga en cuenta que (al menos en las últimas versiones de Windows) siempre hay un controlador de protocolo falso registrado llamado Selector de aplicaciones (esa molesta ventana que le permite elegir con qué aplicación desea abrir un archivo desconocido). Esto puede desvanecer sus pruebas por lo que si no desea manejar el entorno de Windows como un caso especial, puede simplificar este proceso como:

1. Si está ejecutando en un dispositivo móvil, asuma que tel: es compatible.
2. Si está ejecutando en el escritorio luego reemplace tel: con callto: luego suelte el tel: o déjelo como está (suponiendo que haya buenas posibilidades de que Skype esté instalado).