電話発信用のリンクをスマホの時だけ有効にする設定（PCの場合は無効に）

a要素に「tel」を指定し電話発信用のリンクを設定した時、スマホで閲覧した時だけタップで電話発信ができるようにする設定。
パソコンから閲覧した時はリンクを無効にする。（クリック出来ない状態にする）

どの端末からアクセスしているのか？を判別させ、HTMLにclassを設定してスマホ（タブレット）の時だけa要素を有効にする。

HTML側の設定

電話発信用のリンクにしたいところにclassを指定する。
※ここではclass名をtelにしてある。

画像でリンクする場合

img要素の中にclassを指定する。

<img src="images/tel.png" width="190" height="40" alt="お問い合わせ" class="tel" />

テキストでリンクする場合

spanタグやpタグなどでclassを指定する。

<span class="tel">お問い合わせはこちら</span>

Jsの設定

下記をのコードを記載する。

<script>
$(function(){
var device = navigator.userAgent;
if((device.indexOf(‘iPhone’) > 0 && device.indexOf(‘iPad’) == -1) || device.indexOf(‘iPod’) > 0 || device.indexOf(‘Android’) > 0){
$(".tel").wrap(‘<a href="tel:ここに電話番号"></a>’);
}
});
</script>

※JavaScriptのコードを外部化する方法はこちら

以上