レスポンシブサイトでスマホ時のみ電話番号にリンクを張る

レスポンシブサイトでスマホ時のみ電話番号にリンクを張りたい場合がたまにあるので、実装方法をメモ。

サンプルコード

スマートフォンかタブレットの場合をユーザーエージェントで判定して、タグを書き換える形で実装してみます。
data-telが付いている要素をリンク書き換えの対象として、その値が電話番号になるように設定します。

HTML

<span data-tel="0300000000">03-0000-0000</span>
<span data-tel="0312345678"><img src="tel.png" /></span>

JavaScriptでスマートフォンかタブレットの場合を判定して、タグを書き換えます。
data-telの中身はそのまま引き継ぎますが、data-tel要素自体に付いているclassなどの属性は引き継がないので注意してください。

JavaScript

$(function() {
	sp_tel();
});

// スマートフォン・タブレットで談話番号にリンクを追加する
function sp_tel() {
	var ua = navigator.userAgent.toLowerCase();
	var isSpTb = (ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('android') > -1);
	if(!isSpTb) {
		return;
	}
	for (var i = 0; i < $('[data-tel').length; i++) {
		var telElem = $('[data-tel]').eq(i).html();
		var telUrl = $('[data-tel]').eq(i).data('tel');
		$('[data-tel]').eq(i).replaceWith('<a href="tel:' + telUrl + '" data-tel="' + telUrl + '">' + telElem + '</a>');
	}
}

スマートフォンで確認すると、リンクが張られているのが確認できました。
スマートフォンでリンクを張るデモページ