レスポンシブサイトで要素をクリックで電話を発信させるときに
<a href="tel:000-000-0000">000-000-0000</a>
いった感じで記述するときがあると思います。

このとき、PCのときはクリックしても何も起きないようにしたい場合があると思います。
その方法を今回は紹介したいと思います。

※jQueryを使用しています。

aタグ内のテキストは残したまま、aタグを削除する

var ua = navigator.userAgent; //UA取得
var device = 'pc';
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
  device = 'smt';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
  device = 'tablet';
}

$(function(){
  if( device == 'pc' ){
    $('a.telClick').contents().unwrap();   
  }  
});

PCだった場合に「telClick」のクラスをaタグをのaタグのみを削除するようになっています。

例えば
<p><a href="tel:000-000-0000" class="telClick">000-000-0000</a></p>
を
<p>000-000-0000</p>
にします。

aタグのクリックを無効化する

var ua = navigator.userAgent; //UA取得
var device = 'pc';
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
  device = 'smt';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
  device = 'tablet';
}

$(function(){
  if( device == 'pc' ){
    $('a.telClick').on('click',function(){
      return false;
    });    
  }  
});

PCだった場合に「telClick」のクラスをaタグをクリックしても何も起きないようにするコードです。

最初の方法と違い、aタグは残ったままになります。

お好みの方法をお使いください〜。