レスポンシブデザインで電話リンクを張るときはJQueryが便利！

レスポンシブデザインでサイトを構築するときの電話番号ほど厄介なものはない。
以下のようにすると電話することはできるが、パソコンの際はお粗末になってしまう。

<a href="tel:0120111111">0120111111</a>

これでリンク設定すると、PCで遷移すると「リンクがありません」と表示されたりするので
まるでリンク切れのように見えてしまう。
そんな時はJQueryがとても便利。
まず電話番号を設定したい画像またはpタグ、spanタグにクラスをつける。
今回はtelとうクラスを当ててみる

<img src="●●.jpg" class="tel">

これを以下のJQueryのコードで解決だ！

$(function(){
	var device = navigator.userAgent;
	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('Android') > 0){
		$(".tel").wrap('<a href="tel:0120111111"></a>');
	}
});

ユーザーエージェントで判別して、
そこからtelクラスを設定しているところにリンクを追加するという単純な処理。