毎回「なんて書けばいいんだっけ…？」って忘れてググってるので、自分用にメモ。

iPhoneの余計な仕様

めちゃくちゃ迷惑な仕様なんですが、iPhone（iPadも？）でWebサイトを見るとaタグを付けていなくても電話番号に勝手にリンクを貼られてしまいます。は？？

これiPhoneユーザーの人なら自分で気付けると思いますが、筆者は生粋のAndroidユーザーなので気付けるはずもなく「なんか電話番号にリンク貼られてるから消しといて」って言われても「？？？？？」という状態になりました。

タップ時に電話を掛けるかどうかの確認が出るだけならまだ許せたんですが、調べたらブラウザが勝手にaタグを挿入しているらしく、文字色も変わるしアンダーバーも付くし、最悪レイアウトも崩れます。ほんとやめてほしい。

リンクを無効化する方法

迷惑な機能なんでさっさと切りましょう。

電話番号への自動リンクを無効化するには、以下のメタタグをhead内に記載してください。

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

これでブラウザに「電話番号に勝手にリンク貼るのやめろ」と伝えることができ、自動リンクが解除されます。

こういう設定は基本的に全部自分でやりたいので、新サイトの立ち上げ時はとりあえず脳死で突っ込んどいてもいいかもしれないですね。

リンクさせたいときは自分で設定しよう

もし電話番号にリンクを付けたいなら、ブラウザ側に生成させるのではなく自分で設定しましょう。記述はこちら。

<a href="tel:0120-000-000">0120-000-000</a>

普通にリンクを作成するのと同じ手順で、頭にtel:を付けるだけでOKです。これでタップすると電話を掛けることが出来るリンクを作成することが出来ます。

ただこのままだとPCでもクリックできるようになってしまい微妙なので、メディアクエリを付けてpointer-events:none;をセットするとかやっといたほうがいいかも？