iPhone や iPad の電話番号の自動リンクを無効化する方法

iPhone や iPad の電話番号の自動リンクを無効化する方法を紹介します。
例えば、自動リンクになることで起こる表示崩れを防ぐのに便利な方法です。

  1. 電話番号の自動リンクを無効化する方法
  2. 電話発信用のリンクを追加する方法
  3. パソコンだけ電話発信用リンクを無効にする方法

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

iPhone や iPad の電話番号の自動リンクを無効化するには、meta 要素の name="format-detection" を使用します。
例えば、iPhone や iPad で電話番号の自動リンクを無効化する場合は、name="format-detection"content="telephone=no" を追加します。

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

電話発信用のリンクを追加する方法

任意の位置に電話番号を記載したい場合はプロパティ hreftel: を指定します。

<a href="tel:0120xxxxxx">電話番号や画像要素</a>

パソコンだけ電話発信用リンクを無効にする方法

パソコンだけ電話発信用リンクを無効にするためには、リンク要素にCSSプロパティ pointer-eventsnone を指定します。
メディアクエリでスマホとパソコンで条件を分け、パソコンの条件の指定に pointer-events: none; を追加してください。

a[href^="tel:"] {
pointer-events: none;
}

まとめ

iPhone や iPad の電話番号の自動リンクを無効化する方法を紹介しました。