サポート範囲がわからなかったのでざっくりまとめる。
先にまとめ
- 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に定義があるのでそちらを参考のこと。