BLOG

ブログ

不まじめなことも書いています。

レスポンシブのサイトで指定幅以下になった際、電話番号にリンクが付くjQuery

2019.09.15

subordinate

これを書いたのは下っ端です。

前回の「スマホサイトで「電話を掛ける」追従リンクで複数電話番号入れたい時、こんなレイアウトはどうでしょう?」に実装されていますが、
レスポンシブのサイトで指定幅以下になった際、電話番号にリンクが付くjQueryコードのご紹介です。

ググれば沢山出てきますが、多くがユーザーエージェントで判断するものです。
実際その仕様の方が利便性や実用性がありますよね。
今回ご紹介するのはあくまでも「こんなこともできますよ」という感じでご覧ください。
※最適化前なのでご利用される場合は、適当な形で修正することをお勧めします。

jQuery

$(function(){
    var wsize = $(window).width();
    var mobilesize = 768;
    if(wsize <= mobilesize){
		$("p.link_mobile").replaceWith(function() {
		  $(this).replaceWith('<a class="link_mobile" href="tel:'+$(this).text()+'">'+$(this).html()+'</a>')
		});
    }else{
		$("a.link_mobile").replaceWith(function() {
		  $(this).replaceWith('<p class="link_mobile">'+$(this).html()+'</p>')
		});	
    }
}); 
$(window).resize(function(){
    var wsize = $(window).width();
    var mobilesize = 768;
    if(wsize <= mobilesize){
		$("p.link_mobile").replaceWith(function() {
		  $(this).replaceWith('<a class="link_mobile" href="tel:'+$(this).text()+'">'+$(this).html()+'</a>')
		});
    }else{
		$("a.link_mobile").replaceWith(function() {
		  $(this).replaceWith('<p class="link_mobile">'+$(this).html()+'</p>')
		});	
    }
  });

 

HTML

<p class="link_mobile">1111-111-111</p>

 

若干コードは違いますが、以下URLで動作確認ができます。
768px以下のブラウザサイズで電話番号のリンクが有効化されています。
https://intercord.jp/test/sp_menu/




ブラウザのリサイズ時に電話番号を有効化するか否かの処理を行っていますが、
よっぽど特殊なサイトでない限り、ユーザーエージェントで電話番号リンクの判断をさせた方が良いと思います。
ちょっとしたご相談事などでもお気軽にお問い合わせください。

BLOGを見る