全ブラウザ対応!電話番号リンクで電話をかけよう!

Pocket

20151130-1

こんにちは、戸井です。
宮崎は急に冷え込みました。
全然寒くならないので、このまま年越すかな?と思っていたのですが、考えが甘かった様です。
急遽、マフラーと手袋を出して頑張って通勤しています。

パソコンサイト、スマホサイト関係なくのお問い合わせには電話番号が記載されていますよね?
iPhoneの標準ブラウザであるsafariでは、電話番号のような数列を、電話番号として認識し、タップすると電話がかけられるようになってます。

しかし、別のgoogle chromeには、電話番号を認識する機能はありません。
そのため、どんなにタップしても電話をかけることが出来ません。

なので、スマホでどのブラウザでも電話をかけれる方法をお伝え致します!

簡単な解決法として、下記の物があります。

<a href="tel:かけたい電話番号">電話番号もしくはテキスト</a>

これで解決!と言いたいところですが、一つ問題が・・・
それは、PCで電話番号をタップするとブラウザによってはエラーが表示されるのです。
PCで電話はかけれないので当然のことですが、これを解決しないといけません。
20151130-2

その方法として、下記方法があります。
head内に下記の内容をいれます。

<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内に下記の内容をいれます。

<script type="text/javascript">smtel(‘かけたい電話番号’);</script>

たったこれだけで、safariはもちろんgoogle chromeで電話をかけることが可能になり、PCで電話番号の部分をクリックしてもエラーが表示されることはありません。

まとめ
いかがだったでしょうか?
はじめは、PCでエラーを出さないのは難しいかな?と思っていたのですが、以外と簡単に解決しました。
まだ対応してない方は、ぜひ試してください。