IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

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

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

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

HTML

<div class="tel_link">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のサイトにも使えます。