EdgeとSafariの番号表示に困っていますか？

あなたが作ったサイトにあるFAX番号はスマホブラウザーで見たらどうなるか確認してますか？

私は先日、スマホでクロスブラウザーテストをしたときにEdgeとSafariのFAX番号表示に困っていました。

具体的に言いますと、電話番号らしき数字を電話番号として認識されるところです。

このような誤認識を避けるには、どう対策すればいいのでしょうか？

通常のやり方

まず通常の＜p＞タグで囲むやり方で表示させてみます。

	<div>
		<p>電話:123-456-7890<br>FAX：321-654-987</p>
	</div>

iPhoneのSafariで確認した結果はこちらです。

電話番号もFAX番号も勝手にリンク化されてしまいましたね。
EdgeもSafariと同じ現象が起こりましたがFirefoxとChromeは大丈夫でした。

回避方法その1

この現象を回避するために、まず電話番号自動認識を無効にするmetaタグを追加しました。

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

同じiPhoneで改めて確認してみたところ、

Safariは回避できたようですが、Edgeはダメでした。

解決を求めてMicrosoftサイトに辿り着きましたが、EdgeではなくIE11の情報が載っていました。

では、電話番号として認識される番号の特徴をみてみましょう

各国によって電話番号のパターンが異なってきますので、普通の数字列でもかなりの確率で電話番号として認識されそうです。具体的な電話番号と認識されないパターンについては、サイトから確認してみてください。

参考：Phone number format recognition details

一応「”fax”など特定のキーワードが使われているページでは、自動認識が効かない可能性があります。」と記述されていますが、どうやら可能性が低いようですね。

回避方法その2

そして次に：x-ms-format-detection属性をnoneに指定しました。

<p x-ms-format-detection="none">Fax:321-654-987</p>

逆に自動リンク化をさせたい場合は「all」か「phone」に指定するといいでしょう。

ではもう一度Edgeで確認してみます。

結果

結果は変わっておらず正直ガッカリです。

おまけ

ちなみに電話番号を確実に自動リンク化したい場合は、下記の書き方がおススメです。

電話:<a href="tel:1234567890">123-456-7890</a>

最後に

上記の対策方法でアンドロイドとiPhone両方で自動リンク化の回避を試してみた結果はこんな感じです。

◎…対策の必要無し 〇…対策すれば回避可 ×…対策しても回避不可

ユーザーにとってスマホブラウザーの便利機能があると嬉しいですが、制作側にとっては困るところかもしれませんね。

参考：Phone number format recognition