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リンクを表示させない」というやり方もあるようです。
【参考サイト】
