Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

レスポンシブデザインで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);
}
emegane
PHP / symfony ウェブデザイナーを4年間 → 決済システムのエンジニア @ 楽天株式会社を3年間→2012年 起業 ロジレスで物流を見える化。
http://www.logiless.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした