スマホで閲覧時のみ、電話番号リンクを追加する

スマホで閲覧時のみ、電話番号リンクを追加する

スマホで閲覧したときに電話番号へのリンクを追加する方法を調べたのでメモ。

スマホで閲覧したときには電話番号タップで電話をかけられるようにしたい。
でも、ただリンクを貼っただけだとPCで閲覧したときには「開けません」などのメッセージが表示されてしまいます。
スマホで閲覧したときにだけ電話番号へのリンクを追加するようにすると便利です。

調べた中ではjQueryでの実装が記述もシンプルで分かりやすかったです。

サンプル

JavaScriptでUserAgentを取得してスマホからのアクセスかを判別し、class名(tel)が指定された画像やテキストの周りをaタグ(<a href="tel:0120111111"></a>)で囲んでいます。

<!-- 画像でリンク -->
<img src="img/tel.png" alt="フリーコール:0120111111" class="tel">

<!-- テキストでリンク -->
<span class="tel">フリーコール:0120111111</span>
<script>
    $(function(){
    	var device = navigator.userAgent;
    	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
    		$(".tel").wrap('<a href="tel:0120111111"></a>');
    	}
    });
</script>

サンプル(電話番号が複数の場合)

電話番号が複数ある場合は、電話番号ごとにclass名を設定します。

<img src="img/tel.png" alt="0120111111" class="tel1">
<img src="img/tel.png" alt="0120222222" class="tel2">
<script>
    $(function(){
    	var device = navigator.userAgent;
    	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
    		$(".tel1").wrap('<a href="tel:0120111111"></a>');
    		$(".tel2").wrap('<a href="tel:0120222222"></a>');
    	}
    });
</script>

参考サイト

スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript(jQuery) : code14

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事