iPhone（iOS）Safariで勝手に電話番号がリンクになって見栄えが変わってしまう場合の対処方法

掲題の通りなのですが、
作成したサイトをiPhoneで見ると、
特に

とか入れていないのですが、
勝手にリンクが付いて、電話が出来るようになっていますよね。

便利っちゃあ便利なのですが、
勝手にリンクが付くことで、
想定した見栄え（color / text-decoration など）が変わってしまうことがありますよね。
最悪の場合、電話番号が見えなくなってしまうなんて言うことも。。。

電話番号が

消えてしまう。。

しかも、厄介なのは、シュミレーターでは問題なく表示されるため、
実機でチェックしないと分からないってことですね。。。

原因はSafariの自動リンク付与機能

上述の通り、原因はiOS側で、電話番号を認識し、
勝手にリンクを貼ってしまうことなので、それを解除することで解決します。

ヘッダーのメタ情報に下記を追記することで
自動リンクを解除することが出来ます。

ただ、
「せっかくなので自動リンク機能は保持したい」
というワガママさんもいるかもしれません笑。

その場合は、CSS側で調整するのが良いかと思います。
iOSの場合、どうやら電話番号を認識すると、
下記のようなHTMLを追記するようです。

なので、
この自動付与したタグを目掛けてCSSを振ってやれば、
解消するかと思います。
下記のような感じでしょうか。

ただ、この場合、

のタグ全てに同様のCSSが当てられてしまいますので、
それを避けたい場合は別途classを振って対応いただく感じになるかと思います。

ひとまず今回は、上記内容にて対応しました。
またほかに良い方法があったら、共有したいと思います。

どなたかの参考になれば幸いです。
それでは。