【テクニック】電話番号に自動でリンク設定される機能を無効にする方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
iPhoneやandroidなどスマホ端末でWEBサイトを閲覧すると電話番号の部分に自動でリンク設定されタップすることで電話をかけることが出来ます。
これはスマホ端末のブラウザが電話番号と判断される数字に対して自動でリンク設定してくれるためです。
しかし、場合によっては電話番号リンクを設定したくないという場面もあるかもしれません。
今回の記事ではスマホ端末で電話番号に自動でリンク設定される機能を無効にする方法をご紹介します。
メタタグでページ全体を指定する方法
まずはじめにメタタグを指定してページ全体で電話番号に自動でリンク設定される機能を無効化するためには以下のメタタグを記述します。
<meta name="format-detection" content="telephone=no">これで自動で電話番号にリンク設定される機能を無効化することが出来ます。
CSSで個別に指定する方法
続いて、個別に電話番号に自動でリンク設定される機能を無効化する方法をご紹介します。
<p class="tel">1234-56-7890</p>このような電話番号を記載したHTMLがあったとします。これは以下CSSを指定することで個別に指定することで電話番号の個所に自動でリンク設定されるのを無効化することが出来ます。
.tel a {
pointer-events: none;
}iPhoneのGoogle Chromeアプリで対応する方法
最後に最近とある案件で「メタタグでページ全体を指定する方法」で全体を無効化しつつ、「CSSで個別に指定する方法」でも無効化しているのにリンク設定されてしまうと指摘を受けた際に対応した方法をご紹介します。
まず、この現象が起こったのは以下の条件の時でした。
- iPhone
- Google Chromeアプリ（バージョン：120.0.6099.119）
最初はその現象が起こりませんでしたが、その当時の最新バージョン120.0.6099.119にアップデートすることで現象が発生しました。
おそらくiPhoneの端末は関係なく、Google Chromeのバージョンによって起こるようです。
その時対応した方法は以下になります。
<p class="tel"><a href="#">1234-56-7890</a></p>.tel a {
pointer-events: none;
}最初から<a>タグを記述し、その自分自身で記述した<a>タグに対してリンク機能を無効化するCSSを指定します。
こうすることで無事、上記の環境でも自動で電話番号にリンク設定される機能を無効化することが出来ました。
まとめ
今回はスマホ端末で電話番号に自動でリンク設定される機能を無効化する方法をご紹介しました。
便利な機能ですが、時にはその機能を無効にしたい、そんな時は今回ご紹介した方法を活用してみてください。
