ウェブのあれこれ
ウェブを活用したいひとのためのブログ
スマートフォンの時だけ電話発信できるようにする方法
2016/03/13 Javascript

スマートフォンの時だけ電話発信できるようにする方法

スマホから電話発信できるようにaタグをフツーに書くと、PCでもリンクになってしまいます。スマホの時だけリンクにするやり方です。
フツーに電話発信を書くならこうなります。

<a href="tel:xx-xxxx-xxxx">電話する</a>


上記だと、PCでもリンクになってしまいます。

スマホの時だけaタグにする


方法はいくつもあるのですが、今回はjQueryのuserAgentでiPhone,Androidかどうか判別し、

span(じゃなてくもいいです)をaタグでラップする方法です。

html

 

<span data-tel="xx-xxxx-xxxx">電話</span>

jQuery

var ua =navigator.userAgent; 
//iPhoneまたはAndroid判別
if(ua.indexOf('iPhone') > -1 || ua.indexOf('Android') > -1) {
//iPhoneまたはAndroidの時
$(function() {
$("[data-tel]").each(function(){
    //[data-tel]の値を変数telに
var tel = $(this).attr("data-tel");
    //[data-tel]を持つ要素(ここではspanダグです。)を<a>〜</a>でラップする
$(this).wrap('<a class="' +'btn-tel' + '"' + ' href="tel:' + tel + '"' + '"></a>');
});
});
};

html+jQuery(iPhone or Android)時


上記ソースでiPhoneまたはAndroidからページを読み込むと、

以下ソースコードになります。

<a class="btn-tel href="tel:xx-xxxx-xxxx">
<span data-tel="xx-xxxx-xxxx">電話</span>
</a>



また、上記だけだと、spanタグは常に表示されてますので、

cssのメディアクエリと組み合わせて、ウィンドウサイズ+デバイスで「電話発信」のリンクを

表示させたり表示させなかったり調整しましょう。

Provided by Revolme inc.
revolme.co.jp