tochio続：レスポンシブのサイトでスマホの時だけ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を修正する
■ｊ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>
【参考サイト】
