iPhoneやiPadなどのiOS端末では、テキストで入力した電話番号が自動でリンク化してしまいます。
便利な機能ですが、サイトの見栄えを重視するとこれを防ぎたい場合もありますよね。
今回はそんなiOSでの自動リンクを防ぐ方法を紹介します。
ページ全体で電話番号の自動リンク化を無効にする方法
ページ全体で電話番号が自動でリンク化してしまうのを防止するには、HTMLのhead要素内に以下のコードを記述します。
<meta name="format-detection" content="telephone=no">これで電話番号が自動でリンク化してしまうのを防ぐことができます。
意図的に電話番号をリンク化したい場合には、<a href=”tel:”></a>を使用してリンクを作成することも可能です。（参考：【初心者でも簡単!】HTMLでリンクのクリック時に電話を発信させる方法）
一部の電話番号の自動リンク化のみ無効にする方法
ページ全体ではなく、特定の電話番号の自動リンク化のみを防止したい場合は、その要素に以下のCSSを適用します。
pointer-events: none;
これで、スタイルを当てたリンクをクリックした時、イベントの発生を止めることができます。
自動リンク化防止用のclassを作成しておくと便利ですね。
まとめ
iOS端末で電話番号が自動でリンク化してしまうのを防ぐ方法をご紹介しました。
意図せずに電話番号がリンク化してしまった場合にぜひご活用ください。