Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

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

INDEX

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>
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる