スマホ表示時にタップで電話番号をかけれるようにする。

今回はスマホ表示時にタップで電話番号をかけれるようにする方法についてです。

ユーザーがスマホでサイトを閲覧した時に
わざわざ電話番号を入力する手間をかけてまで電話をかけてくれるか？といえば
大概の場合「面倒くさいしまた今度電話しよう・・・」なんて思われ二度とかけてくれない、なんてなりかねません。
思い立った時にタップの１動作だけで電話がかけられる事がユーザーにストレスを与えない為にも必須です。

・設定の方法は実に簡単、

 <a href="tel:0123456789"></a>

aタグのhref内に「tel:」と入れ電話番号を設定するだけです。

ただ、この状態のままだとPC表示でも電話がかかってしまうので
jQueryを使って特定の端末時のみタップが効くように設定します。

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();
    });
}

これで完成です。
レスポンシブ表示等ででスマホ、ＰＣの両ユーザーにストレスを与えない為にも
こういった細かい部分に配慮をする事が大切です。