電話番号へのリンクをパソコンでエラーにしない、ユーザーエージェントによる書き換え
公開日:2013年10月15日

電話番号へのリンクは、パソコンでクリックするとブラウザによってはエラーになってしまいます。なので、ユーザーエージェントでこの部分を切り替える方法を探したらあったのでメモ。
追記:2013.12.30
本記事の方法でうまくいかない場合、Tips Note様のレスポンシブのサイトでスマホの時だけtelリンクを有効にするもお試しください。jquery使っている環境ならこの記事の「■jQuery版」が良いかもしれません。
本記事の方法でうまくいかない場合、Tips Note様のレスポンシブのサイトでスマホの時だけtelリンクを有効にするもお試しください。jquery使っている環境ならこの記事の「■jQuery版」が良いかもしれません。
iPhoneの標準ブラウザであるsafariでは、03-9999-9999といった電話番号のような数列を、ちゃんと電話番号として認識し、タップすると電話がかけられるようになってます。
しかし、別のiPhoneブラウザのgoogle chromeには、そのような機能はありません。
何とかしてchromeでも電話番号をタップして電話をかけられるようにしたいと思い、とりあえず<a href=”tel:0399999999″>という古典的な方法を試したのですが、これだと電話機以外でタップやクリックすると、ブラウザによっては、大げさなエラーがでます。
firefoxは、わざわざ新ページまで開いて大げさにエラーが出る
chrome(PC版)など、何も起こらないブラウザもありますが、このエラーを起こしたくなかったので、調べてみました。
そしたらあった。
a href=tel → PCで表示させない方法 OKWave
ユーザーエージェントで切り替える方法です。
実装
まずhead内に下記のスクリプトを貼り付けます。
1 2 3 4 5 6 7 8 9 |
<script type='text/javascript'> function smtel(telno){ if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){ document.write('<a href="tel:'+telno+'">'+telno+'</a>'); }else{ document.write(telno); } } </script> |
そして、body内の該当箇所を下記の3番目のようにするだけです。
下記はDEMOのbody内のソースです。
1 2 3 4 5 6 7 8 |
<div>03-9999-9999</div> <p>↑文字で電話番号を書いただけ。iPhone safariは自動的に電話番号として認識する。chromeだと認識しない</p> <div><a href="tel:0399999999">03-9999-9999</a></div> <p>↑aタグtel:で電話番号を書いた。クリックすればスマホから電話がかけられる。しかし、電話機ではないブラウザでクリックするとエラーになる。</p> <div><script type="text/javascript">smtel('03-9999-9999');</script></div> <p>↑今回書いた方法で書いたもの。スマホ(今回はiPhoneとAndroid)から電話がかけられる。その他のデバイスだと何もおこらない。</p> |
3つ目の<div>内のように記述します。もちろん電話番号は変えてください。
iPhoneでの見え方
・サファリ
サファリは3つとも電話番号として認識します。
・クローム
クロームは数字だけ書いてあっても電話番号として認識しません。
以上です。
スポンサーリンク
カテゴリー:ホームページ制作 » HTML/CSS/JS
作成者:けん
大変参考になりました。
画像を使用した場合はどのようにすればよいか
ご教示ください。