IEなどのブラウザやiphoneは、数字の文字列に電話をかける自動でリンクを生成します。
リンクがすべて電話番号なら良いのですが、電話番号でない、連続の数字を電話番号だと認識してリンクを作成したりします。
iphoneやipadなどのスマートフォンは電話番号のリンクに対して、タップするだけで簡単に電話をかけれるようになっているので、
数字などの文字列を電話番号だとブラウザに誤認識されてしまうと、間違い電話や、ユーザーを混乱させる原因となるため、標準でオフにしておいたほうがよさそうです。
そして、この機能を無効化するには、headに以下のようにmeta要素を追加します。
1 2 3 4 |
<head> <meta name="format-detection" content="telephone=no"> </head> |
先ほどの記述で、自動で電話のリンクを作成する機能は無効化しましたが、
個別で電話番号にリンクを張りたい場合には以下の記述をすれば大丈夫です。
1 |
<a href="tel:電話番号を記述">お問い合わせ</a> |
また、PCなどのブラウザでは電話をかけることができないので、スマートフォンのみで電話をかけるようにjsで設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { if (!isPhone()) return; $('span[data-action=call]').each(function() { var $ele = $(this); $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>'); }); }); function isPhone() { return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0); } |
コメント