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

2784745974-cell-phone-690192-XDlv-480x320-MM-100

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

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

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

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

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

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です