コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

EdgeやSafariは電話番号っぽいものに勝手にハイパーリンクをしてしまうが、制御できるタグがある

サポート範囲がわからなかったのでざっくりまとめる。

TL;DR

  • SafariやEdgeで電話番号と思わしき文字列があると自動でハイパーリンクが設定され、タップすると電話をかけられるようになる。しかしながらそうしてほしくない場面もある。
  • <meta name="format-detection" content="telephone=no"> を使うとApple系(Safari)もMicrosoft系(Edge,IE)も自動処理をしないようにしてくれる
  • Microsoft系だけ、x-ms-format-detection という選択肢が用意されている

両方とも有効なformat-detection

記述方法は以下、ページ全体に適用となる。

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

出典は以下、まずはApple

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature. ( デフォルトでは、iOS上のSafariは電話番号のような形式の文字列を検出し、その番号を呼び出すリンクにします。telephone=noを指定すると、この機能が無効になります。 ) - Supported Meta Tags

そしてMicrosoft

To disable the behavior for a webpage, use the meta element: <meta name="format-detection" content="telephone=no"/> - Phone number format recognition (Windows) | Microsoft Docs?redirectedfrom=MSDN)

Microsoft系(Edge,IE11))のみに有効なx-ms-format-detection

記述例としては以下、こちらはmetaタグではなくタグの属性として記述をしてあげればOK。以下はpタグに付与した例。

<p x-ms-format-detection="none"> 090-000-0000 </p>

また、x-ms-format-detection の値にあたる部分は三種類用意されているが none のみが無効の設定となる。

Phone number format recognition (Windows) | Microsoft Docs?redirectedfrom=MSDN)

電話番号をちゃんと指定したい場合はどうするべきか

逆の話にはなるが、電話をかけられるようなハイパーリンクを作りたい場合はaタグにて tel: のURLスキームを利用する。詳しくはRFC3966に定義があるのでそちらを参考のこと。

関連リンク