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

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

 
これを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 だからってスマホなわけではないのですが、そこはきっと閲覧してる方も汲み取ってくれるはず…です…