Site icon Tips Note by TAM

続:レスポンシブのサイトでスマホの時だけtelリンクを有効にする

前回の記事「レスポンシブのサイトでスマホの時だけtelリンクを有効にする」の続きです。

前回紹介した記事の記述では、単純に 「ユーザーエージェントが『iPhone』『Android』であるデバイス」のみ、 電話番号にtelリンクを設定しました。 しかし、実はこれだけでは以下のような問題があります。

  • ユーザーエージェントに「iPhone」を持つデバイスの中には、「iPod」も含まれる。
  • ユーザーエージェントに「Android」を持つデバイスの中には、「Androidタブレット」も含まれる。

電話をかけることのできないiPodやタブレットで、 電話番号にtelリンクが設定されるのは好ましくありません。 そこで、

  • 「ユーザーエージェントに『iPhone』を持つデバイスのうち、『iPod』も含むものを除外」し、
  • 「ユーザーエージェントに『Android』と『Mobile』を含むもの」にtelリンクを反映する

ように、記述を変更します。

■JS版

function smtel(telno){
    if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPod') == -1) || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0){
        document.write('<a class="tel-link" href="tel:'+telno+'">'+telno+'</a>');
        }else{
        document.write('<span class="tel-link">'+telno+'</span>');
    }
}

【CSS】

.tel-link {
color: #06F;
font-size: 16px;
font-weight: bold;
}

【html】

お問い合わせ:<script type="text/javascript">smtel('00-0000-0000');</script>

■jQuery版

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

【CSS】

.tel-link {
    color: #06F;
    font-size: 16px;
    font-weight: bold;
}

【html】

お問い合わせ:<span class="tel-link">00-0000-0000</span>

これで解決!と思いきや、世の中には、 「ユーザーエージェントに『Android』かつ『Mobile』が含まれる『タブレット』」 という、わけのわからないものが存在するのです。 現在把握できている、ユーザーエージェントに「Android」かつ「Mobile」の値を持つ タブレットは、以下の2機種です。

  • GALAXY Tab SC-01C
  • lenovo A1_07

この2機種を、「ユーザーエージェントに『Android』かつ『Mobile』が含まれるもの」から 除外するために、さらに振り分けの記述を追加します。 (CSS・htmlは上述の通りです)

■JS版

function smtel(telno){
    if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPod') == -1) || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 && navigator.userAgent.indexOf('SC-01C') == -1 && navigator.userAgent.indexOf('A1_07') == -1 ){
        document.write('<a class="tel-link" href="tel:'+telno+'">'+telno+'</a>');
        }else{
        document.write('<span class="tel-link">'+telno+'</span>');
    }
}

■jQuery版

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 && ua.indexOf('iPod') == -1 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 && ua.indexOf('SC-01C') == -1 && ua.indexOf('A1_07') == -1 ){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

今後、「ユーザーエージェントに『Android』かつ『Mobile』が含まれる『タブレット』」が 発売されるかどうかは不明ですが、数は多くないのではないかと思いますので、 その都度、除外する機種として追加していけばいいのではないでしょうか。 当面はこのような記述で、「PC・iPod・タブレットはtelリンクなし、スマホにはtelリンクを反映する」 ということができそうです。

========================================================================================

このスクリプトは、電話番号部分がテキストではなく画像でも実装できます。 この場合、画像のaltを取得し、その番号に電話をかけるようするので、 以下の2点に注意する必要があります。

  • 画像には必ず正確なaltを入れる
  • 電話番号が変更になった場合は、画像を修正すると同時に、必ずaltを修正する

■jQuery版

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 && ua.indexOf('iPod') == -1 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 && ua.indexOf('SC-01C') == -1 && ua.indexOf('A1_07') == -1 ){
        $('.tel-link img').each(function(){
            var alt = $(this).attr('alt');
            $(this).wrap($('<a>').attr('href', 'tel:' + alt.replace(/-/g, '')));
        });
    }
});

【html】

お問い合わせ:<span class="tel-link"><img src="[表示する画像のパス]" alt="00-0000-0000"></span>

【参考サイト】