jQuery –電話番号のリンクをスマホで有効、PCで無効にする。

jQuery – 電話番号にリンクをスマホで有効、PCで無効にする。

レスポンシブサイト制作で電話番号を<a href=”tel:000-000-0000″>で 掲載するとき、スマホからのアクセス時はタップで電話が出来るので良いのだが、PCでクリックしてしまうとプロトコル云々・外部プロトコル云々となどと表示されて困る。

スマホからアクセス時はタップで電話が出来て、PCではリンクを無効にしてくれる、そんな便利なものはないかと探してみたらありましたのでメモメモ。

jQuery 読み込んで script 記述するだけで CSS とかいらない。

テレリン対策はこれでok。

デモサイト

HTML

<a href="tel:000000000">TEL:000-000-0000</a>

SCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
	var ua = navigator.userAgent;
	if (ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0) {
		$('a[href^="tel:"]').css('cursor', 'default').click(function (event) {
			event.preventDefault();
		});
	}
</script>

参考にさせて頂きましたサイトはこちら。

KoToRi Blogさん（http://kotori-blog.com/js/tel_delete/）