tochio

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

PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、 スマホサイトなら、電話番号にtelリンクを貼って、スマホから 直接電話をかけられるようにすると思います。

PC・スマホ・タブレットと、さまざまなデバイスにワンソースで対応している レスポンシブのサイトの場合はどうでしょうか。

ソースにあらかじめtelリンクを設定しておくと、PCで見た際に 「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。 (もともとtelリンクは、ガラケーやスマホ向けの機能なので、当然と言えば当然です) telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、 電話番号をタップして電話をかけることができません。 電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。

こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリンクを 設定するようにすれば、解決できます。

■JS版

【JS】

function smtel(telno){
  if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 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】

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

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

■jQuery版

【JS】

$(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>'));
        });
    }
});

【CSS】

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

【html】

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

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

どちらも、ユーザーエージェントを取得・判定して、スマホからアクセスしている時のみ、 電話番号にtelリンクを設定するという方法です。 すでにjQueryを使用しているのなら、jQuery版使ったほうがいいかもしれません。

また、これとは逆の発想として、「ソースにtelリンクを設定しておき、PCの時のみ telリンクを表示させない」というやり方もあるようです。

【参考サイト】

お問い合わせはこちら