プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

2017.7.10更新

スマートフォン表示の時、電話番号などにタップコールを実装する方法

Attention!

javascriptを記述して、スマートフォン閲覧時に電話番号やバナーなどをタップすると自動的に電話アプリが立ち上がる方法についてご紹介します。

1まずはタップコールを実装したいhtmlの箇所にクラス属性をつけます。
<div>
    <img class="telephone" src="img/logo_tell.png" alt="TEL:03-0000-0000">
</div>

電話番号のロゴにクラス名:telephoneを付与しました。次にjavascriptの記述で、スマートフォン表示の時にtelephoneをタップした際、指定の番号に電話をかけるアプリ起動を発動させます。

2javascriptを以下のように記述します。
<!--スマホ時に電話番号タップ可能-->
<script>
    $(function(){
        var device = navigator.userAgent;
        if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
            $(".telephone").wrap('<a href="tel:0300000000"></a>');
        }
    });
</script>

if条件分岐でスマートフォンOSを指定しておき、スマホ閲覧時にはクラス「telephone」に「a」タグのリンク指定で電話番号を指定します。

トップへ