iPhone Safari にて HTML 上で電話番号を記載すると自動的に発信リンクが追加される既成事実について
iPhone Safari にて HTML 上で電話番号を記載すると自動的に発信リンクが追加され、
Safari 側で自動的に <a href="tel:{電話番号}">{電話番号}</a> のようにアンカータグが追加されることがある。
<p>090-4444-4444</p>
↓
<p><a href="tel:090-4444-4444">090-4444-4444</a></p>
もちろんこのようなリンクはクライアント側の iPhone や HTML 側で解除するのは可能だが、一般の iPhone ユーザの方々は解除してないケースも多いと思われる。
ちな、HTML 側で <a href="tel:090-4444-4444"> の自動リンクを解除するには以下のタグを <head> タグ内に入力する。
<meta name="format-detection" content="telephone=no">
さらにメールアドレスの自動リンクをオフにするには
<meta name="format-detection" content="email=no">
自動リンクについては勝手に <a> タグが追加されるので、それを念頭においた CSS を組むこと。
上の HTML の場合は以下のようになる。
p a {
color: white;
text-decoration: none;
}
昔は href="phoneto:" とか href="telto:" とかキャリアや機種ごとに割り当てられてたのにある意味楽になった気がする。
ちな、レスポンシブを考えた tel: を自動付加するかどうかの JavaScript、jQuery も提供されているので以下を参照されたし。
http://www.tam-tam.co.jp/tipsnote/javascript/post3209.html
興味深いことに、VMWare Fusion をオーストラリア経由で購入した時、使っていたパソコンが Mac OS X の Yosemite だったからなのかどうかは不明だが、サポートの電話番号に電話をかけるリンクが付随していた。
そしてクリックすると、電話をかけるかどうかも尋ねてくれた。
Mac OS X Yosemite なら https://www.apple.com/jp/osx/continuity/ にあるようにハンズフリーで電話がかけられるから、状況により上述の jQuery を使った PC のみ tel: リンクを消すのは見ている人が Yosemite の場合では控えてもいいのかもしれないと思いつつ、マス的にも小さすぎるからスルーしてもいいかなと感じる今日このごろです。
上の JavaScript を使った OS 認識で tel: を追加するかどうかは Yosemite に対応させる場合は以下のようにしてみるといいかも。
function smtel(telno){
if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 || navigator.userAgent.indexOf('Mac OS X 10_10') > 0 ){
document.write('<a class="tel-link" href="tel:'+telno+'">'+telno+'</a>');
}else{
document.write('<span class="tel-link">'+telno+'</span>');
}
}
ただ、Yosemite 以降の Mac OS X にも対応させることを考えれば後々面倒になるかもしれないし、乱暴に言えば Mac OS X Puma(10.1) とか使っている人など居ないことを念頭において'Mac OS X 10_1' としてもいいのかもしれない。
まあ一番ラクなのは自動リンクしてくれることを念頭においた設計をして、自動リンクされるであろことから CSS も設定することやな。
