Evita la deteccion automatica de telefonos en un dispositivo iphone. Esto me sucedio hace 3 dias

  • Evita la deteccion automatica de telefonos en un dispositivo iphone. Esto me sucedio hace 3 dias

Evita la deteccion automatica de telefonos en un dispositivo iphone. Esto me sucedio hace 3 dias

Hace 3 dias, una empresa de marketing digital solicito mis servicios en desarrollar un landing page con responsive web design.

Terminando la versión desktop (escritorio), me centre en la versión responsive. En otro artículo publicare emuladores responsive.

Como estaba diciendo, me centre en la versión responsive y revisando en un smarphone, se veía correctamente el landing page.

Pero cuando el cliente revisaba en su iphone 5, 6, me comenta que los números fijos y celulares se mostraban como hipervínculos.

telefonos y celulares con hipervinculos en un dispositivo movil iphone

La idea es que se vea bien en ambos dispositivos móviles, ya sea un smarphone o un iphone.

Personalmente no me llama la atención los dispositivos moviles iPhone.

Googleando y consultando en los grupos de desarrollo web de facebook y en stackoverflow, encontré unos artículos que habían tenido el mismo problema hace meses atrás. Porque se mostraba así ?.

La razón es porque probablemente Safari Mobile está cambiando el DOM. Como decía en un artículo que lei:

¿Te parece familiar esa ingeniosa característica de iOS en que simplemente tocas sobre un número de teléfono o celular dentro de una página web y el iPhone de inmediato llama a ese número ?

Es una buena idea cuando el usuario toque su iphone o haga touch, llame a un contacto. Pero en mi opinión personal y técnico, ME HA DESCUADRADO LOS ESTILOS.

Créanme que fue un dolor de cabeza.

Ahora bien. Como todo problema tiene solución, que se debe hace en estos casos ?

1. Colocas esta etiqueta tag debajo del meta charset utf-8

2. Si tienes el mismo problema para los emails, colocas esto.

Como resultado te debe quedar así.

deteccion automatica teléfonos en codigo html parte 1

Ahora si quieres que el usuario pueda tocar los números de teléfono que aparecen en la página para hacer una llamada desde su dispositivo movil smartphone y iphone, sólo tienen que agregar un link explícitamente, de esta manera y le colocas tu estilo css:

deteccion automatica teléfonos en codigo html parte 2

Con esto solucionas el problema de los números fijos, celulares, correos electrónicos y te evitaras un mal dia.

Espero que este tutorial te sirva de utilidad en tus futuros proyectos.

Buen dia.