Si estás diseñando para Safari en móviles y ves que tus números de teléfono se vuelven misteriosamente azules y subrayados, no eres el único. Por defecto, Safari detecta automáticamente los números de teléfono y los convierte en enlaces clicables, a menudo pasando por encima de tus estilos CSS.
El problema
La detección automática de números de teléfono de Safari es útil en algunos casos, pero para diseñadores y desarrolladores puede romper el diseño previsto o la coherencia de marca, sobre todo si trabajas con tipografías o paletas de color personalizadas.
La solución sencilla
La buena noticia es que puedes desactivar este comportamiento con una sola línea de código en tu etiqueta <head>:
<meta name="format-detection" content="telephone=no">
Esto le indica a Safari que no detecte ni formatee automáticamente los números de teléfono, para que tengas control total sobre cómo se ven en tu sitio.
Consejo profesional
Si quieres que los números sigan siendo clicables, pero con tu propio estilo, puedes envolverlos a mano en etiquetas <a href=»tel:1234567890″> y aplicar tu propio CSS:
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
Luego estilízalo como quieras:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Conclusión
La detección automática de Safari puede ser útil para los usuarios, pero problemática para los diseñadores. Con una metaetiqueta sencilla o unos estilos controlados, evitas cambios de diseño no deseados y mantienes la interfaz coherente en todos los navegadores.
Para más consejos rápidos de desarrollo como este, vuelve a identitydesign.us