電話番号へのリンクをパソコンでエラーにしない、ユーザーエージェントによる書き換え

公開日:2013年10月15日 

電話番号へのリンクをパソコンでエラーにしない、ユーザーエージェントによる書き換え

電話番号へのリンクは、パソコンでクリックするとブラウザによってはエラーになってしまいます。なので、ユーザーエージェントでこの部分を切り替える方法を探したらあったのでメモ。


追記:2013.12.30
本記事の方法でうまくいかない場合、Tips Note様のレスポンシブのサイトでスマホの時だけtelリンクを有効にするもお試しください。jquery使っている環境ならこの記事の「■jQuery版」が良いかもしれません。

iPhoneの標準ブラウザであるsafariでは、03-9999-9999といった電話番号のような数列を、ちゃんと電話番号として認識し、タップすると電話がかけられるようになってます。

しかし、別のiPhoneブラウザのgoogle chromeには、そのような機能はありません。

何とかしてchromeでも電話番号をタップして電話をかけられるようにしたいと思い、とりあえず<a href=”tel:0399999999″>という古典的な方法を試したのですが、これだと電話機以外でタップやクリックすると、ブラウザによっては、大げさなエラーがでます。

denwa-link1

firefoxは、わざわざ新ページまで開いて大げさにエラーが出る

chrome(PC版)など、何も起こらないブラウザもありますが、このエラーを起こしたくなかったので、調べてみました。

そしたらあった。

a href=tel → PCで表示させない方法 OKWave

ユーザーエージェントで切り替える方法です。

実装

DEMO

まずhead内に下記のスクリプトを貼り付けます。

そして、body内の該当箇所を下記の3番目のようにするだけです。
下記はDEMOのbody内のソースです。

3つ目の<div>内のように記述します。もちろん電話番号は変えてください。

iPhoneでの見え方

・サファリ

denwa-link3

サファリは3つとも電話番号として認識します。

・クローム

denwa-link4

クロームは数字だけ書いてあっても電話番号として認識しません。


以上です。


One Response to “電話番号へのリンクをパソコンでエラーにしない、ユーザーエージェントによる書き換え”

  1. よっしー より:

    大変参考になりました。
    画像を使用した場合はどのようにすればよいか
    ご教示ください。

コメントを残す