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

tochio

11年 ago

前回の記事「レスポンシブのサイトでスマホの時だけ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を修正する

■ｊQuery版

$(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>

【参考サイト】