カメニッキ

カメとインコと釣りの人です

レスポンシブ対応のWebページで、スマートフォンからのアクセス時のみ電話番号リンクを有効にする方法

old

以下のようになります。

<html lang="ja">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    // UAを取得
    var ua = navigator.userAgent;
    // iPhoneまたはAndroidのみ処理を実行
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        // phone-linkクラスが指定された<a>タグを全て置換する。
        $('.phone-link').each(function(){
            var str = $(this).text();
            //tel:で指定する番号はハイフンを除去する
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});  
</script>
</head>

<body>
<span class="phone-link">03-1234-5678</span>
</body>
</html>

やってることは単純に、変換対象のクラスを見つけたら子要素にaタグ入れてるだけです。


PCからのアクセスの場合
03-0123-4567 

スマートフォンからのアクセスの場合
03-1234-5678


と表示されます。
電話番号リンク化させたい端末を増やしたい場合、上のifを適当に書き換えてください。