Cómo evitar la detección automática de teléfonos en las páginas HTML

15 de agosto de 2013

Si visitas una página o aplicación HTML desde un dispositivo móvil con Android o iOS, cualquier número que parezca un teléfono se transforma automáticamente en un enlace que el usuario puede pinchar para llamar a ese número.

Este comportamiento por defecto de los navegadores móviles es el más lógico, pero en algunos sitios web puede ser contraproducente. Imagina que en tu empresa utilizas números de serie con un formato similar al de un teléfono. Al mostrar los números de serie en las páginas HTML, el navegador los convertirá en teléfonos y puede crear una gran confusión entre tus usuarios.

Para evitar estos problemas, es posible desactivar la detección automática de teléfonos añadiendo la siguiente etiqueta <meta> en todas tus páginas:

<meta name="format-detection" content="telephone=no">

Desactivar la detección automática no es incompatible con mostrar enlaces a números de teléfono. Si utilizas los enlaces especiales para móviles puedes indicar explícitamente si un número debería mostrarse como si fuera un número de teléfono:

<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
    <!-- Desactivar la detección automática de números de teléfono -->
    <meta name="format-detection" content="telephone=no">
</head>
<body>
    <!-- ... -->
    <p>Número de serie: <span>900-900-900</span></p>
    <p>Número de teléfono: <a href="tel:+34-900-900-900">900-900-900</a></p>
</body>
</html>

Utilizando esta misma técnica, puedes desactivar la detección automática de emails y de direcciones postales:

<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
    <!-- Desactivar la detección automática de números de teléfono -->
    <meta name="format-detection" content="telephone=no">

    <!-- Desactivar la detección automática de emails -->
    <meta name="format-detection" content="email=no">

    <!-- Desactivar la detección automática de direcciones postales -->
    <meta name="format-detection" content="address=no">
</head>
<body>
    <!-- ... -->
</body>
</html>