iPad用Safariは、tel URIを「連絡先」に追加できる

Tweet

hCard関係をいじっているわけなんですけれども、hCardとは関係なく、iPadのSafariで、<a href="tel:0120-xxx-xxx">0120-xxx-xxx</a>というタグを入れると、Safariが自動的に選択ポップアップを表示し、「連絡先に追加するか」を聞いてきます。

この動作は、DOM操作で後からリンクにした要素にも効き、しかもonclickイベントを付けても、「連絡先に追加する」の方が優先されて表示されます。

▲「連絡先に追加する」かどうか聞いてくる

不思議なのは、<a href="tel:0120-xxx-xxx"><img src="hoge.jpg" /></a> とした場合。「連絡先に追加する」が表示されず、エラーになる。

なんか、雰囲気的にはタッチしたところがimg要素だとだめっぽい。よって、span要素でdisplay: inline-blockにして大きさ指定しておき、background-imageで画像を指定する方法だといける。そこまでするのもどうかと思っております……

2011.03.19 18:38 投稿　大野 義貴 [Web] | 固定リンク |