【レスポンシブサイト】スマホ表示時のみ電話番号をクリックできるようにする設定

レスポンシブサイトを作成する際、スマートフォンで閲覧している時のみ電話番号をクリックして電話発信ができるようにしたいときがあるかと思います。（逆を言うと、パソコンで閲覧している時は、電話番号をクリックできないようにしたい）
その際の設定をメモしておきます。

スマートフォン表示時のみ電話番号にリンクを貼る設定JS

$(function(){
	if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
		$("a.tel-link").each(function(){
			$(this).replaceWith("<span>" + $(this).html() + "</span>");
			});
	}
});

スマートフォン以外（PCの場合）は、aタグをspanに差し替えます。

スマートフォン表示時のみ電話番号にリンクを貼る設定HTML

<a class="tel-link" href="tel:電話番号">電話番号</a>

aタグにclass=”tel-link”を追加するのみなので、サイト内で共通して使用できます。
共通JSに上記のJSを記載しておくと便利です。

自動でナンバーにリンクを貼る設定をOFF

<meta name="format-detection" content="telephone=no">

iPhoneの場合、自動で電話番号らしき数字にリンクを貼ってくれる機能をOFFにします。
（誤った数字にリンクを貼らないため）
今回のスマートフォン表示時のみ電話番号にリンクを貼る設定とは直接は関係ないですが、電話番号の設定関連なのでメモしておきます。