tochio続：レスポンシブのサイトでスマホの時だけtelリンクを有効にする
前回の記事「レスポンシブのサイトでスマホの時だけtelリンクを有効にする」の続きです。
前回紹介した記事の記述では、単純に 「ユーザーエージェントが『iPhone』『Android』であるデバイス」のみ、 電話番号にtelリンクを設定しました。 しかし、実はこれだけでは以下のような問題があります。
- ユーザーエージェントに「iPhone」を持つデバイスの中には、「iPod」も含まれる。
- ユーザーエージェントに「Android」を持つデバイスの中には、「Androidタブレット」も含まれる。
電話をかけることのできないiPodやタブレットで、 電話番号にtelリンクが設定されるのは好ましくありません。 そこで、
- 「ユーザーエージェントに『iPhone』を持つデバイスのうち、『iPod』も含むものを除外」し、
- 「ユーザーエージェントに『Android』と『Mobile』を含むもの」にtelリンクを反映する
ように、記述を変更します。
■JS版
1 2 3 4 5 6 7 | 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】
1 2 3 4 5 | .tel-link {color: #06F;font-size: 16px;font-weight: bold;} |
【html】
1 | お問い合わせ：<script type="text/javascript">smtel('00-0000-0000');</script> |
■jQuery版
1 2 3 4 5 6 7 8 9 | $(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】
1 2 3 4 5 | .tel-link { color: #06F; font-size: 16px; font-weight: bold;} |
【html】
1 | お問い合わせ：<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版
1 2 3 4 5 6 7 | 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版
1 2 3 4 5 6 7 8 9 | $(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版
1 2 3 4 5 6 7 8 9 | $(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】
1 | お問い合わせ：<span class="tel-link"><img src="[表示する画像のパス]" alt="00-0000-0000"></span> |
【参考サイト】
