スマホで電話番号などに自動的にリンクが付くのを防ぐ方法

自動的に設定されるリンクを無効化する

スマホ対応のレスポンシブサイトを制作しているのですが、スマホのブラウザによっては勝手にリンクが設定されてしまい、どうにかならないかと調べた方法をメモ。

私はiPhoneをメインに使用していますが、iOS対応ブラウザとしてSafariはもちろん、Chrome、Edge、Bravaが入っていますが、それぞれ違った挙動でリンクが貼られてしまい困りました。

メタタグを使用する方法

<head>～</head>の間に以下のタグを埋め込みます。

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

これを設定すると電話番号にリンクが付くのを防ぐことができるようです。

電話番番号以外に、住所、メールアドレス、日付や時間にリンクが付くことがあります。その場合は以下のように複数を指定すればいいみたいです。iPhoneのSafariはこれでOKでしたが、Bravaはダメでした。

<meta name="format-detection" content="telephone=no,address=no,date=no,email=no">

または

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

これを設定したからといって、既存の<a href="tel:0120123456">0120-123-456</a>などが無効になることはありません。

Edgeブラウザの場合

ブラウザがEdgeの場合は電話番号などが記載されたタグにx-ms-format-detection="none"を設定すれば良いみたいです。

<p x-ms-format-detection="none">0120-123-456</p>

ただし、この属性はInternet ExplorerとMicrosoft Edge固有の属性です。それ以外のブラウザでは利用できませんので注意しましょう

それでもダメな場合

リンク無しのリンクをダミーで貼る

上記のいずれもダメな場合は空のリンクを貼ってポインターを無効にします。CSSのpointer-events: none;を使ってポインターイベントを無効化することでリンクがクリックされるのを回避できます。多分、これが一番最強の方法で、どのブラウザにも対応できるかと思われます。Safari,Chrome,Edge,Bravaのすべてで自動的にリンクを貼られるのを回避できました。

<a class="nolink">0120-123-456</a>

.nolink {
    pointer-events: none;
    text-decoration-line: none;
    color: inherit !important;    
}

興味深い方法

以下のサイトに記載された方法。

Link

Attention Required! | Cloudflare

https://stackoverflow.com/questions/28027330/html-email-ios-format-detection

試していませんが、Appleの文字があるのでSafari対応だと思われますが、CSSで解決できるっぽいです。

<style type="text/css">
  a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
  }
</style>