レスポンシブサイトでスマホの時だけリンクを有効にする
レスポンシブサイトで
電話番号を記載して
スマホで見た時はタップして電話できるようにリンクを設定したいけど
パソコンで見た時はリンクをしないようにしておきたい。
ということがよくあると思います。
そのような時はjQueryを使って、
スマホでアクセスした時だけ電話番号にリンクを設定できます。
電話番号がテキストの場合
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(function(){ var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.telLinkTxt').each(function(){ var str = $(this).text(); $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>')); }); } }); |
HTML
|
1 |
<p>お問い合わせ：<span class="telLinkTxt">00-0000-0000</span></p> |
jQueryでユーザーエージェントを取得・判定して、
スマホからアクセスしている時のみ、
電話番号にリンクを設定します。
テキスト（電話番号）を取得してリンク先を設定します。
※テキストはハイフン有り無しどちらでもOKです。
電話番号が画像の場合
先述では画像には対応できません。
そこで、電話番号を画像にした時のために画像用を作成してみました。
altの内容を取得してリンク先を設定します。
※逆にこちらはテキストには設定できません。
※altには電話番号のみを入れてください（ハイフン有り無しどちらでもOKです）。
jQuery
|
1 2 3 4 5 6 7 8 9 |
var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.telLinkImg img').each(function(){ var str = $(this).attr('alt'); $(this).wrap('<a href="tel:' + str.replace(/-/g, '') + '"></a>'); }); } |
HTML
|
1 2 |
<!-- altは電話番号のみ入力 --> <p class="telLinkImg"><img src="../images/common/tel.png" alt="00-0000-0000" /></p> |
スマホユーザーにとっては
お問い合わせなど
簡単に電話できるようにしておくと便利ですね。
========================
▼参考にさせていただきました。ありがとうございます。
この記事の投稿者
iziz
Webデザイナー&HTMLコーダーときどきイラストレーター。
