スマホ用の電話表示

レスポンシブサイトでPCの時にはテキスト表示、スマホ時にはタッチでCALL出来るようにするコード。

 

headに追加
電話番号に自動でリンクされるaタグを無効化

HTML
1
<meta name="format-detection" content="telephone=no">

 

電話をこのタグで表示

HTML
1
<span data-action="call" data-tel="03-1234-5678">03-1234-5678</span>

 

javascriptを追加

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
    if (!isPhone())
        return;
 
    $('span[data-action=call]').each(function() {
        var $ele = $(this);
        $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
    });
});
 
function isPhone() {
    return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}