Go to list of users who liked
Share on X(Twitter)
Share on Facebook
More than 5 years have passed since last update.
レスポンシブデザインで気をつけたい、電話番号の扱い
レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。
電話番号の自動リンク機能を無効化する
iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。
しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。
電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。
<!DOCTYPE html><html><head><!-- 電話番号の自動リンク機能を無効化 --><metaname="format-detection"content="telephone=no"><title>文書のタイトル</title></head><body></body></html>電話番号にリンクを張る
ユーザにリンクをクリックすることで電話をかけさせたい場合には、a タグのhref 属性に次のように記載します。（電話番号が 03-1234-5678 だと仮定します。）
<ahref="tel:0312345678">電話はこちらへ</a>しかし、これではPCで閲覧しているユーザにもリンクが有効となってしまいます。
そこで、JavaScriptを使い、スマートフォンで閲覧しているユーザにだけ、電話番号にリンクを張る 機能を実装します。
HTML側の記述
HTML側には、電話番号をdata属性に埋め込んだspan タグで電話番号を囲います。
<spandata-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>');});});functionisPhone(){return(navigator.userAgent.indexOf('iPhone')>0||navigator.userAgent.indexOf('Android')>0);}Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme