HTML: Los números de teléfono cambian de color en dispositivos iOS (iPhone, iPad etc)

Llevamos un tiempo con un cliente quejándose porque el teléfono en su web no se veía bien en los iPhone. Nosotros no tenemos iPhone pero lo probábamos en mil teléfonos y mil emuladores y se veía bien. No encontrábamos la razón.

El color de los números de teléfono cambia en dispositivos iOS.

Al final la encontramos. Lo que pasa es que iOS detecta los números de teléfono en las páginas web y cambia el color como si fuera un enlace. Ya que puedes pinchar en el teléfono de la página y te llama.

Para evitarlo por CSS tenemos que poner lo siguiente (si queremos que coja el mismo color que tiene el texto alrededor):

a[href^=tel] { color: inherit; text-decoration: none; }

Obviamente esto lo podemos cambiar por el color que queramos como:

a[href^=tel] { color: #fff; }

Así de fácil.