まえがき

iPhoneやandroidは「tel」プロトコルを使用すれば、そのリンクをタップすると番号発信を行うということが可能になります。

■具体例

<a href="tel:0012345678">電話する</a>

しかし、「tel」プロトコルが指定されたリンクをPCで開こうとすると当たり前ですが開けません。

そうなると、例えばレスポンシブ対応のサイトを制作する場合、HTMLの構造は基本的にPC、スマホともに同じなので「tel」プロトコルを使用するとなるとPCにも反映されてしまいます。
困りますね。

ということで、この記事ではPCでアクセスされた時のみ「tel」プロトコルが指定されたaタグを削除する方法を紹介したいと思います。
jqueryです。

PCのみ「tel」プロトコルが指定されたaタグを削除する方法

HTMLの「tel」プロトコルの指定

HTMLの方に若干細工を施します。「tel」プロトコルのaタグにクラス名を付けるのと、spanタグを入れ子にしてください。
こんな感じ。

<a class="telhref" href="tel:00123456789"><span>電話はこちら</span></a>

PCのみ「tel」プロトコルが指定されたaタグを削除するコード

HTMLに細工できたら下記のjsを読み込んでください。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){
        $('.telhref span').each(function(){
            $(this).unwrap();
        });
    }
});

これでPCでアクセスした時にはtelのリンクが反応しなくなります。

まとめ

これは結構使用頻度高いと思うので覚えておくのが吉です。

ただ気がかりなのが、本当に「span」タグが必要なのかということ。
「unwrap()」は指定した要素の親のHTMLタグを削除するものです。なので「span」タグを入れ子にする必要があるのですが、
そもそも、aタグを葬り去るには「unwrap()」を使用するしかないのでしょうか？
他にも方法がありそうな気がします。

わざわざ「span」タグ付けなくてもできる方法があれば是非おしえてください。