HOME > > > レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインを適用した時にスマートフォンで電話番号にリンクを張るのは<a>~</a>じゃダメなの?

レスポンシブWebデザインを適用した際は、スマートフォン(タブレット)でも最適化されて見られる様になります。 PCでは電話番号は記載するだけですが、スマートフォン・タブレットの場合は直接タップして電話できた方がユーザーの手間も省けます。 iPhoneやiPadのブラウザ「safari」の場合は自動で電話番号にリンクが張られ、タップして電話を掛ける事ができます。
ですが、「chrome」や「Android端末」では自動でリンクが張られず、そのままでは電話番号をタップできません。
単純に<a>~</a>を使っても電話番号リンクは張れますが、PC用にもリンクがついてしまいます。
Javascriptを使ってスマートフォン・タブレットで電話番号をタップ出来る処理をしていきましょう。

電話番号の自動リンクを無効化する

まずは電話番号の自動リンクを無効化します。 <head>内に「<meta name=”format-detection” content=”telephone=no”>」を追加してください。
これでiPhoneやiPadで電話番号に自動につくリンクを無効化する事ができます。


<html>
    <head>

        <!-- 電話番号の自動リンクを無効化するmeta -->
        <meta name="format-detection" content="telephone=no">

        <title>サイトタイトル</title>
    </head>

head以下省略・・・

HTMLの記述:電話番号にリンクを張ります

次にHTMLの記述方法です。 電話番号にリンクを張るのですが、通常の<a>~</a>を使ってしまうとPC用でもリンクが有効になってしまいます。
data属性を埋め込んだを使って電話番号を囲います。


<span data-action="call" data-tel="01234567890">電話を掛けるならココをタップ!</span>

Javascriptを記述します

上記のhtmlの記述だけではリンクは貼られていません。 javascriptを使って、<span>を<a>で囲む処理をします。


$(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);
}

こちらのjsを使う際はjqueryが必要となります。

jqueryダウンロードはこちら

無事設定完了

以上で設定は完了です。 アップル製品が多くのメディアで取り上げられているのでちょっと忘れがちかもしれませんが、Android系もしっかりチェックしておかないとですね。

参考サイト

こちらのサイトを参考にさせて頂きました。
ありがとうございました。

レスポンシブデザインで気をつけたい、電話番号の扱い

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket