スマートフォンでウェブサイトを閲覧中に掲載の電話番号へ電話をかけたいことありますよね。iPhoneは結構お節介でSafariだと電話番号とおぼしき数字列は自動的に【 href=tel: 】になります。たまに電話番号じゃない数字列にまでtelリンクついていることもありますが。これがChromeだと無視したまんまでタップできない。

かといってHTMLにベタに、<a href="tel:**-****-*****">電話はこちら</a>って書いちゃうと、デスクトップで見たときに不格好だしクリックした時のエラーも気になる。つまりスマホの時はタップできて、デスクトップの時は単なる文字列になるようにしたいわけですな。

こちらで詳しく紹介されていました。

まずヘッダ内に、

<script type='text/javascript'>
function smtel(telno){
if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
document.write('<a href="tel:'+telno+'">'+telno+'</a>');
}else{
document.write(telno);
}
}
</script>


と記述しておきます。
番号を表示したいところに
<script type="text/javascript">smtel('***-****-****');</script>

注'***-****-****=電話番号
と記述。

これでスマートフォンではタップでき、デスクトップでは単なる文字列な電話番号が出来上がります。

ありがとうございます!

あ、iPadとかアンドロイドタブレットのときはどうしようか。。