iOS Safari が自動で追加する電話リンクを CSS だけで無効にする

iOS Safari さんの小さな親切が大きなお世話なときの処方箋です。忘備録として。

1.「電話リンクを自動で追加してくれるのはありがたいんだけど、これは電話番号ではないのだよ」というとき

iOS Safari が <a href="tel:[phone]"> のようなリンクタグを追加するので、CSS セレクタには a を含めるようにします。pointer-events は、クリックを無効化する CSS プロパティですね。

<style>
.disable-auto-tel a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
</style>
<p class="disable-auto-tel">0123456789</p>

2.「電話リンクは自分で設定するから、余計なお世話は不要だぜ」というとき

小さな親切が不要なときは、こうします。

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