【html】電話番号の自動リンクを無効化する方法

はじめに

スマートフォンやタブレットの機能で、電話発信用のリンクを設定していなくても、親切に自動でリンクをつけてくれ、電話番号をタップすると発信できるようになっています。

この機能を、metaで制御することは知っていたのですが、今回、FAX番号、関連会社の電話番号のように一部の番号のみ制御したいということで、meta以外の方法を知らなかったので、調査したメモです。

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

現時点（2023年6月）iPhoneでは、無効化できることが確認できたんですが、私が使用しているAndroid（バージョン13）では、タップすると、電話番号と認識し、発信できてしまいました、、※metaを指定してもしなくても挙動に変化なし

確実に、リンクを無効にしたい場合は、個別に指定するのが有効そうでした。

クリック・タッチイベントを無効化する「pointer-events」プロパティを使用し、無効化したい電話番号のaタグに「pointer-events: none;」を指定します。

HTML

<span class="link-none">03-0000-0000</span>

CSS

.link-none {
   pointer-events: none;
}

使用しているandroidで確認したところ、タップしても発信はされませんでした。
androidでmetaでの電話番号のリンクの無効化ができない記事は見つからずでしたが、今回の制作でandroidとiPhoneで見え方違うということがあったので、両方で確認すること大事ですね！