サイト制作に関するメモ書き

HOME > HTML・CSS > Edgeで電話番号にリンクが自動で追加される

Edgeで電話番号にリンクが自動で追加される

スマートフォンで電話番号っぽい数字に自動で電話番号のリンクを貼る機能がありますが、Edgeにも同じ機能が実装されているようなので対応方法をメモしておきます。

サンプルコード

特に設定を行わない場合です。

HTML

<p>080-0000-0000</p>

Edgeで確認すると自動でリンクが追加されます。
対応前のデモページ

対応方法ですが、スマートフォンでの対応と同じく、head内に下記を追加することで対応できます。

HTML

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

対応後のデモページ

もしくはx-ms-format-detection属性を指定することで、指定した要素とその子要素に対して電話番号の検出動作を設定できるようです。

HTML

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

noneだと無効で、phoneまたはallで有効になります。
対応後のデモページ2
 

機能はIE11から実装されているようですが、IE11ではリンクの追加が確認できませんでした。
認識される電話番号の形式はこちらになります。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP