解 説
javascriptを記述して、スマートフォン閲覧時に電話番号やバナーなどをタップすると自動的に電話アプリが立ち上がる方法についてご紹介します。
1まずはタップコールを実装したいhtmlの箇所にクラス属性をつけます。
1 2 3 | <div> <img class="telephone" src="img/logo_tell.png" alt="TEL:03-0000-0000"></div> |
2javascriptを以下のように記述します。
1 2 3 4 5 6 7 8 9 | <!--スマホ時に電話番号タップ可能--><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」タグのリンク指定で電話番号を指定します。
電話番号のロゴにクラス名：telephoneを付与しました。次にjavascriptの記述で、スマートフォン表示の時にtelephoneをタップした際、指定の番号に電話をかけるアプリ起動を発動させます。