cssのみでレスポンシブのスマートフォンサイズの時だけ電話番号リンクを有効にする方法

css でリンクを無効/有効にする方法

cssで電話番号リンクを無効にしたり、有効にしたりするには、pointer-eventsというプロパティーを使います。「pointer-events: none;」を指定するとリンクがクリックできなくなり、「pointer-events: initial」をクリックするとクリックできるようになります。

具体的なサンプルは下記になります。

a[href*=”tel:”]で電話番号のリンク場合はこの「pointer-events」が有効になるように指定しています。
ブレークポイントは1024pxでそれ以下のサイズの時は「pointer-events: initial;」で電話番号リンクを有効に、それ以上の場合は無効「pointer-events: none;」になる設定です。

切り替えるタイミング（レスポンシブのブレイクポイント）については得に決まりはないのですが、おすすめの切り替えポイントはコチラの記事で紹介しておりますので、ぜひクリックしてご確認ください。

ちなみに、今回サンプルとしてレスポンシブのブレイクポイントを「1024px」のタブレットサイズでの切り替えをご紹介しましたが、これは私自身がレスポンシブのブレークポイントを2点に絞る場合にいつも設定する方法です。
この設定をする理由は2つ。
ひとつは、PCサイズとそれ以外のサイズにとりあえず切り分けできていればユーザーに不便はないと思われるから。
2つ目は、スマホによっては横幅で「599px」を超える機種もあり、そういった機種でタップで電話がかけれず、不便が生じる可能性があるからです。

ブレイクポイントに関しては、お問い合わせを増やしたいサイトオーナーとしては、電話番号タップ無効でこの機会を逃したくないし、ユーザーとしては、電話できないデバイスでクリックしてしまったら、余計なプログラムが立ち上がってきて面倒、、この辺のバランスを考えて最適な選択することが大切だと思います。