スマホの時だけTELリンクを適用する

tel-link
皆さんもスマホでサイトを見ているとき、電話番号をタップすると「電話をかける」というダイアログが出てきたことがあると思います。

 
これをHTMLで書くとこうなります。

<a href="tel:0120123456">TEL:0120-123-456</a>

これでテキストをタップすると電話をかけることができるようになります。

 
ところがPCのブラウザでクリックすると「外部プロトコルリクエスト」と出て、なんだか変なサイトに登録されそうな不安を煽るダイアログが出てきます(笑)

 
レスポンシブサイトの場合、さすがにこれではいただけないので、スマホの時だけ機能するようにしたいですよね。

というわけでユーザーエージェントを確認して、スマホの時だけ電話リンクを付与するようにしましょう。
 

jQueryはこちら

$(function(){
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0
        || ua.indexOf('Android') > 0
        || (ua.indexOf('windows') > 0 && ua.indexOf('phone') > 0)
        || (ua.indexOf('firefox') > 0 && ua.indexOf('mobile') > 0)) {
        var telLink = $('#tel_link').text();
        $('#tel_link').html($('<a>').attr('href', 'tel:' + telLink.replace(/-/g, '')).append(telLink + '</a>'));
    }
});

HTMLはこちら

TEL:<span id="tel_link">01-2345-6789</span>

 
正直なところ、OS が Android だからってスマホなわけではないのですが、そこはきっと閲覧してる方も汲み取ってくれるはず…です…

よかったらシェアしてね!

この記事を書いた人

フロントエンドエンジニア/星のソムリエ®
お酒と紅茶とチョコレートが大好きです。

コメント

コメントする

目次
閉じる