下記のように電話番号へのリンクを作成すると、リンクを押下した際に発信させることが可能です。
<a href="tel:03-0000-0000">電話番号へのリンク</a>
PC・タブレット時は発信せず、スマホでのみ発信するようにするにはいくつか方法がありますが、今回は低カロリーなCSSのみで変更する方法を紹介します。
@media (min-width: 600px) { a[href^="tel:"] { pointer-events: none; } }
ブレイクポイントを600pxに設定し、600px以上のブラウザサイズではpointer-events: none;
に設定しています。
案件に応じてブレイクポイントは変更してください。
pointer-events
をnone
にするとクリックイベントを無効化することができます。
便利なプロパティなのでぜひ活用していきましょう。