[jQuery]レスポンシブ対応サイトでスマホのときだけ電話番号にリンクを貼る

  • 公開日:2015/10/5
この記事は最終更新日から7年以上が経過しています。

電話番号の表記において、スマホサイトではtelリンクを貼ればタップで発信することができるので便利です。
でも、HTMLソースで電話番号にtelリンクを記述してしまうと、PCサイトの場合は「プロコトルが不明」「開けません」というメッセージが出てしまいます。

レスポンシブ対応サイトでPCサイトとスマホサイトを同じHTMl記述で表現する場合、telリンクをどうするか悩めるところです。

理想は、PCサイトのときはリンクはなく、スマホサイトのときだけリンクする。
これをjQueryを使って簡単に実現する方法をメモ。

HTML

<div class=&quot;tel_link&quot;>078-123-XXXX</div>

jQuery
もちろん、本体の読み込みもお忘れなく。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel_link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

ユーザエージェントで判断し、「iPhone」「Android」の場合は「.tel_link」で書かれた電話番号から「-(ハイフン)」を取り除いた電話番号にaタグを付与します。

簡単で使えるのでおすすめです。WordPressのサイトにも使えます。