レスポンシブサイト html 電話番号をタップして通話

電話番号

レスポンシブサイトを構築するにあたって、PCで閲覧する人、スマホで閲覧する人にも快適である事を考えなければなりませんよね。 昔と違って複雑になってきてますよね。電話番号はどうしましょう?スマホで閲覧して、即電話したい事もあります。タップしてそのまま電話発信できれば便利ですね。

いろいろな方法がある様です。以前はjavascriptでやっていたのですが、もっと簡単なhtmlとCSSを使う方法があった様なのでご紹介します。

htmlコードを書く

リンクにtel:を足します。tel:の後には(-)ハイフン抜きで電話番号を入力します。

電話:<a href="tel:0312345678">03-1234-5678</a>

スマホ閲覧時だけに設定する

このままですと、PCの時もリンク状態になってしまいますので、ブレークポイントでスマホ閲覧時に限定します。


// 中間のデバイス (タブレット, 768px とそれ以上)
@media (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;       
        text-decoration: none;
    }
}

これで、スマホの時は電話番号をタップする事で発信出来る様になります。

javascriptで設定する場合

以前はこのやり方を採用していました。もう古いのでしょうか??

head内に以下のコードを書きます。

<script type='text/javascript'>
function smtel(telno){
    if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
        document.write('<a class="tel-link" href="tel:'+telno+'">'+telno+'</a>');
        }else{
        document.write('<span class="tel-link">'+telno+'</span>');
    }
}
</script>

電話番号を表示したい所に以下のコードを書きます。

<script type="text/javascript">smtel('03-1234-5678');</script>

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください