iPhoneで電話番号リンク問題の対処方法まとめ

iPhone の Safariは連続する数字が勝手に電話番号のリンクになってしまいます。
電話番号や郵便番号(123-4567)のようなハイフン区切りだけでなく、
小数点(123.4567)のようにドット区切りの数値までも電話番号リンクになります。

これでは困るので対処方法をまとめました。
(iPhone 4, iPhone 4sで動作確認)

目次:

  1. 1.iPhone 版 Safari用の対策
  2. 2.Safari以外のアプリ用の対策
  3. 3.修正できないアプリ用の対策

1.iPhone 版 Safari用の対策

公式な対処方法は、Apple URL Scheme Referenceに書いてあるメタタグをHTMLヘッダ内に指定すると、明示しない限り電話番号としてリンクしなくなります。


<meta name = "format-detection" content = "telephone=no">

2.Safari以外のアプリ用の対策

メタタグを埋め込んで、iPhone 版 Safariで確認して消えていたのでこれで解決、と思ったのですが甘かった。どうやらSafari以外のアプリだとこのメタタグを無視するようで、これだけだとSafari以外からページを開くと相変わらずの電話番号リンクになります。

これはアプリ側のWebViewの設定が原因で、電話番号検出を無効化するにはアプリ実装時に下記コードで電話番号を検出しないよう設定する必要があります。

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

ちなみに Titanium Mobile の場合はこちらを参考に、createWebViewの指定でautoDetectを空にしてやるといいとの事です。

// 電話番号が自動リンクされないWebView
win.add(
Ti.UI.createWebView({
top : 10,
height : 200,
width : 300,
autoDetect : [],// ←ここがポイント！
url : "wv2.html"
})
);

3.修正できないアプリ用の対策

また、既成のアプリなどどうしてもアプリ側を変更できない場合、ややトリッキーですが下記の方法を使えばHTMLだけでもWebViewの電話番号認識を止める事が可能です。

  • 数字の間に<img width=”0″ height=”0″ />を挟む。 
    	1234<img width="0" height="0" />5678
  • <input type=”text” />タグに入れる。 
    <input style="border: none;" type="text" value="3105551212" readonly="readonly" />

個々のアプリの問題ですので現実的には1,2の対応までで留めるべきですが、
こういう方法を知っておくと役立つ事もあるでしょう。

参考