iOS safariで電話番号リンクを無効にする方法

iphoneのsafariでは、電話番号のような数字を認識するとタップで電話がかけられるよう自動でリンクを付与してくれます。

タップで電話が掛けられるというのは便利なものですが、
意図せずIDや会員番号などの電話番号ではない数字の羅列にもついてしまう親切なのだかお節介なのだかよくわからない機能です。

今回はこの電話番号リンクを無効にする方法を2つ備忘録としてご紹介します。

1.meta タグで無効にする

まずは一番簡単な方法。
電話番号を認識させたくないページのhead内に下記の記述を記載します。

<meta name="format-detection" content="telephone=no">

ページ全体で認識しなくなりますので、
もし個別に電話番号と認識して欲しい数字があれば、下記のようにaタグに直接設定します。

<a href=“tel:電話番号”>電話番号</a>

2.CSSで個別に無効にする

こちらは全体に無効設定をしたくない時や、特定の要素のみ無効にしたい場合に使用します。

<p class=“disableTel”>電話番号</p>

.disableTel a:[href^=“tel:”]{
    color:任意の色;
    text_decoration:none;
    pointer-events:none;
}

aタグで囲っていない場合も、safariで見た時には<a href=“tel:電話番号”>という形になっているため、cssでもaを指定します。

pointer-eventsがうまく効かないなと思っている時は、pタグやspanタグに指定してしまっている可能性があります。