sp_menu

【CSS】iOSの電話番号の自動リンクを無効にする方法

[css]iOSの電話番号の自動リンクを無効にする

電話番号をWEBサイトで表示したいとき、iOSだけリンクになって、困ったことはありませんか？今回は、iOSの電話番号の自動リンクを無効にする方法をご紹介します。

この記事では以下のお悩みを解決します。

  • ・iOSで表示される電話番号の自動リンクを無効にしたい
  • ・iOSで表示される電話番号の文字の色を変えたり下線を消したい

1. iOSで電話番号を表示するときの問題点

例としてWEBページに電話番号を文字の色#333にして表示したかったとします。コードを以下のように記述します。

<div class="tel">000-000-0000</div>
.tel {
  color: #333;
}

PC(windows)ではHTML CSSで指定したとおりに表示されます。

000-000-0000(PCの電話番号の表示)

しかしiPhoneでは以下のようにリンクとして表示されてしまいます。

000-000-0000(iphoneの電話番号の表示)

電話番号が直接発信するリンクになっています。また文字の色や下線をなくすように変更したいので以下のように「!important」を記述してみました。ですが、優先順位をあげたとしても変更はできませんでした。

.tel {
  color: #333 !important;
  text-decoration: none !important;
}

WindowsやAndroidではリンクではなく、色も指定したとおりに表示されます。

Macは所有していないので未確認ですが、macOSで問題があったというような情報は見つからなかったのでここではPCの表示は問題なしとさせていただきます。

iOSはSafariだけではなくChromeでも同じようにリンクとして表示されるのでブラウザの問題ではなくiOSが原因のようです。

そこで今回はこの問題の対処法についてご紹介したいと思います。

以下は今回参考にさせていただいたサイトです。

iOS safariで電話番号リンクを無効にする方法｜🦀

https://note.com/kani_web/n/nb2ac01eac42c

2. 対処法

対処法１：metaタグを追加する

１つ目の対処法は簡単で<head>~</head>に以下のmetaタグを追加するだけです。このタグを追加するとページ全体の電話番号のリンクは無効になるのでCSSが反映され下線もなくなり、文字の色も指定した色に変更されています。

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

２つ目の対処法はまず電話番号をaタグの中に記述します。

<div class="tel">
  <a href="tel:000-000-0000">000-000-0000</a>
<div>

これでaタグにCSSを指定すると反映されるようになります。

また、aタグの中に記述したことにより全てのデバイスに表示される電話番号が発信リンクになっているのでイベントを無効化できるように「pointer-events: none」、文字の色や下線をなくすように指定します。

.tel a[href^="tel:"] {
   pointer-events: none;
   text-decoration: none;
   color: #333;
}

これでiOSの電話番号の自動リンクを無効化でき、文字の色、下線も指定どおりに変更できました。

この対処法は、対処法１に比べてコードの記述量は若干増えてしまいますが部分的にリンクにしたいときなど柔軟にリンクを設定できるメリットがあります。

例えば、PCはリンクを無効にし、スマホだけ有効にしたいような場合です。

スマホで表示するときは「pointer-events: auto;」でイベントを有効化しています。

<div class="tel">
  <a href="tel:000-000-0000">000-000-0000</a>
<div>
.tel a[href^="tel:"] {
  pointer-events: none;
  text-decoration: none;
  color: #333;
}

//スマホの表示

@media screen and (max-width:480px) {
.tel a[href^="tel:"] {
  pointer-events: auto;
  text-decoration: underline;
 }
}

3. まとめ

今回は、iOSの電話番号の自動リンクを無効にする方法をご紹介しました。

２つの対処法をご紹介しましたが、全ての電話番号の自動リンクを無効にしたい場合は対処法1の metaタグを記述する方法がコードの記述量も少なくて、良いのかなと思います。

WEB制作する上で電話番号を表示するケースは多いと思いますが、今回のような一部のOSだけ表示が変わってしまうと制作側の手間も増えますし、見落としやすいと思うので気をつけていきたいですね。

関連記事