En réalisant le pied de page dans le template principal d'un des premiers sites que j'ai bâtis avec Oxygen, j'ai découvert avec stupeur que le numéro de téléphone de la cliente qui devait apparaître et que je voyais très bien sur mon ordinateur et dans toutes les vues responsives ne s'affichait pas sur mon iPhone. En revanche sur mon Android, pas de problème.
Diable.
J'ai vite identifié le problème. J'avais utilisé pour le fond de mon pied de page la couleur dominante de la palette de la cliente, couleur que j'avais aussi définie pour les liens de tout le site. Et iOs identifiait le numéro de téléphone et le traduisait automatiquement en lien. Du coup bleu sur bleu, le numéro de téléphone était invisible mais je pouvais "cliquer" sur le lien cliquable dans mon pied de page.
Comme j'ai suivi un certain nombre de liens vers des blogs et des forums avant de trouver la solution, je vous en fais part ici. Pour empêcher iOS de donner à votre numéro de téléphone l'apparence d'un lien, ajoutez le bout de code suivant :
a[href^=tel] { color: inherit; text-decoration: none; }
Et le tour est joué.
Personnellement je le fais en ajoutant dans mon template principal un bloc de code dont je mets la hauteur à zéro (on peut aussi faire display hidden). On doit pouvoir le faire aussi avec code snippets.
Avez-vous une autre solution à ce problème ? Ou une solution plus élégante ?
