スマホ閲覧時に電話番号をタップしただけで電話をかけられるようにする方法

スマートフォンで企業サイトやランディングページ、ポータルサイトなどを見ていると、電話番号やバナーをタップしたらすぐに電話アプリが起動して目的の電話番号に電話をかけてくれますよね？

今では電話番号の表記があれば、当たり前のようにそこをタップすれば電話がかかると思っている人も多いはずです。

では制作者サイドとしてはどのようにコードを書けば良いのでしょうか…。

aタグに入れてあげるだけで簡単に実装できます

ウェブサイトを作っているとよく使うaタグ（リンクタグ）ですが、ここに電話をかけるための記述をするだけでOKです。

<a href="tel:0312345678">お電話はこちら</a>

“tel: ここに実際かける電話番号”　（必ず半角で）

aタグの中は電話番号でもテキストでもイメージでも用途に合わせて変更してみてください。

リンク先として指定をするのでPCで閲覧時でも、リンクをクリックすれば電話をかけることができます。

ですがPCからの場合は電話をかけられなくても良いことが多いと思いますので、PCのみ無効化することも可能です。

PCでの無効化をCSSでする方法

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

とても単純な話ですがPCの場合はpointer-eventsでクリックをできないようにしてしまいます。

クリックできないんだから電話もできないということですね。

これをPC用のCSSに追記してあげれば、スマートフォンではリンクが動作しますがPCではクリックできない（表示のみ）とすることができます。

コード量も少なくほとんどの場合はこれで問題ありませんが、IEでは対応していないバージョンのブラウザもあるようなのでJSで無効化にすることも可能です。

PCでの無効化をJSでする方法

var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
    $('a[href^="tel:"]').on('click', function(e) {
        e.preventDefault();
    });
}

JSではユーザーが何の端末からページを閲覧しているかを取得し、スマートフォンであれば電話可、PCであれば電話不可と設定しています。

しかしこの方法だと、PC閲覧時でもaタグのリンクの効果は残っていますので、マウスオーバーした際にカーソルがポインターになってしまいます。

ですのでPCのCSSに【cursor: default;】を追記してあげましょう。

個人的にはIEはほとんどカバーしていないですが…

当たり前のように使っている機能ですが、いざ自分で書こうとしてみると色々な書き方がありますね。

私はIEをそこまで敏感にフォローはしていないのですが、クライアントや案件によってはJSで一手間かけて書くこともあります。

その時のテンプレートとしてメモしておきます。