イメージ画像

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

この記事の所要時間: 152

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

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

設定手順

  1. HTML側の設定
  2. Jsの設定

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のコードを外部化する方法はこちら


以上


あわせて読みたい関連記事

タグ

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ