JS:telリンクをスマホの時だけ有効化

2017.02.23

レスポンシブサイトで、スマホ表示のときだけtelリンクを有効化したいとき、cssでやるのもいいですがソースが汚れるだけなので、おとなしくscriptで実現しましょう。

あ、当然jQueryの本体は読み込んでいるものとして書きますので、あしからず。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
        $('.tel-link').each(function(){
            var str = $(this).text();
            $(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
        });
    }
});

$(function(){

var ua = navigator.userAgent;

if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){

$('.tel-link').each(function(){

var str = $(this).text();

$(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));

});

}

});

で、こんな感じでソースを書きますね。

<p>
お問い合わせ：<span class="tel-link">00-0000-0000</span>
</p>

<p>

お問い合わせ：<span class="tel-link">00-0000-0000</span>

</p>

あとはお好みでcssを書いちゃってください。以上。

この記事を見た人は次の記事も見ています。

twitter,facebook,youtube埋め込み

301リダイレクト

JS:telリンクをスマホの時だけ有効化

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

タクソノミーページで一番下の子孫要素を取得する方法

HTML5の閉じタグ

第十七回「パーマリンク設定とアドレス切れ」

IEなどでフォントサイズcalc(% + vw)の計算

コピーライトの年号の自動更新

カテゴリ名をリンク付きでリスト表示する WordPressタグ