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

レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。

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

iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。

しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。

電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。

<!DOCTYPE html>
<html>
    <head>
        <!-- 電話番号の自動リンク機能を無効化 -->
        <meta name="format-detection" content="telephone=no">

        <title>文書のタイトル</title>
    </head>
    <body>
    </body>
</html>

電話番号にリンクを張る

ユーザにリンクをクリックすることで電話をかけさせたい場合には、 a タグの href 属性に次のように記載します。（電話番号が 03-1234-5678 だと仮定します。）

<a href="tel:0312345678">電話はこちらへ</a>

しかし、これではPCで閲覧しているユーザにもリンクが有効となってしまいます。
そこで、JavaScriptを使い、 スマートフォンで閲覧しているユーザにだけ、電話番号にリンクを張る 機能を実装します。

HTML側の記述

HTML側には、電話番号をdata属性に埋め込んだ span タグで電話番号を囲います。

<span data-action="call" data-tel="0312345678">電話はこちらへ</span>

JavaScript側の記述

JavaScriptには data-action=call が指定されている span タグを、電話をかけるための a タグで囲む処理を記述します。（jQueryが必要です。）

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