HTMLの電話番号リンクをタブレットやスマホのみ有効にするCSS

ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。

しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。

今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。

電話番号リンクの有効・無効を切り替えるCSSコード

@media (pointer: fine), (hover: hover) {
  a:where([href^="tel:"]) {
    pointer-events: none;
  }
}

これだけです。コピペして使ってみてください。

CSSコードの解説

メディアクエリの pointer を使用すると、端末にマウス等のポインティングデバイスがあるかを判別することができます。

@media (pointer: none)

ポインティングデバイスがない ≒ マウスがない ≒ タブレット・スマホ

@media (pointer: fine)

精度の高いポインティングデバイスがある ≒ マウスがある ≒ パソコン

また、メディアクエリの hover を使用すると、要素にホバーできるかどうか、言い換えるとタッチデバイスなのかを判別することができます。

@media (hover: none)

ホバーが正常に機能しない ≒ タッチパネルディスプレイのみである ≒ タブレット・スマホ

@media (hover: hover)

ホバーが正常に機能する ≒ タッチパネルディスプレイだけではない ≒ パソコン

これらで、タブレット、スマホ、パソコンを判別できます。

紹介したCSSコードでは、pointer-events: none; により電話番号リンクをクリックできないようにしていますが、クリックできないことを伝えるために、color: inherit; や text-decoration: none; なども設定するといいかもしれません。

CSSコードの注意点

電話がかけられるかどうかで判別しているわけではなく、電話がかけられる端末の特徴に合致しているかを判別しているだけなので、例えば、マウスが使えないパソコンや、タッチ操作できないスマホのようなイレギュラーな端末には機能しません。

〆

電話番号リンクを pointer-events: none; で無効化する方法は、あちこちで紹介されてるけど、@media (min-width: ○○px) を使いビューポートの幅でタブレット、スマホ、パソコンを判別しているものばかり。それで不具合はないのだろうか？