レスポンシブサイトを構築するにあたって、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>
コメント ※ハンドルネームでお願いします