tochio

Microsoft Edgeで、数字のみの文字列に勝手にtelリンクがはられる問題

Windows10に実装されて1年半経つMicrosoft Edge。
日本国内でのシェアは5%前後といったところのようですが、今後、Windows7やWindows8からの乗り換えが進めば、シェアが増えるかもしれません。
Microsoftは、Microsoft Edgeを、「Webkit系ブラウザと同じ動作をするブラウザ」と位置づけていて、モダンブラウザで使われている、Webkit(Safari)、Blink(Chrome)、Gecko(Firefox)といった、他のレンダリングエンジンとの互換性を高めるために、IE固有の機能(ActiveX、VBScript、Silverlight等)を削除し、Web標準に対応したブラウザとして設計されているとのこと。
だったらなにもかもWebkit系ブラウザと同じ挙動になるのかと思いきや、やっぱりちょっとくせがありました。

Edgeで見ることが可能な環境の方は、下記のcodepenの表示をEdgeで確認してみてください。

Edge以外のブラウザで見ている方は、下記のキャプチャをご覧ください。上記の表示は、Edgeではこう見えています。

htmlを確認していただくと一目瞭然ですが、電話番号はただの文字列です。なのに、なぜかEdgeではtelリンクになってしまいます。
調べてみると、Edgeには「電話番号らしき数字のみの文字列を電話番号として認識し、勝手にtelリンクをはる」という機能があるようです。どうやらこの機能はIE11の時から実装されていたようですが、IE11ではこのような表示になったことがなかったので、Edgeで見て初めて知りました。

ちなみに、codepenでは動かないのですが、Edgeで見た時に、勝手にtelリンク扱いされてしまった文字列をクリックするとどうなるかというと……

こうなります。
IP電話等を利用する設定をしていないPCの場合、なぜかChromeを開こうとします。PC版のChromeにも電話をかける機能はないのですが……。
(IP電話やSkype等、PCで電話を利用している場合は、そちらで電話をかけようとするようです)

電話をかける機能がないのに電話をかけようとされても困りますので、なんとかしましょう。

回避方法:その1

電話番号として扱わない文字列に、x-ms-format-detection属性を指定することで回避できるようです。

<p x-ms-format-detection="none">080-1234-5678</p>

「none」にするとtelリンク無効、「phone」または「all」にするとtelリンク有効になります。
ですが、この現象は、数字のみの文字列すべてで発生するわけではないようですので、ひとつひとつ確認して、電話番号と認識されている文字列にひとつずつ記述していくのはちょっと面倒です。

回避方法:その2

スマホサイトを作るときと同様、電話番号らしき数字の羅列に自動でtelリンクをはらないよう、ヘッダに以下の記述を入れます。
こちらのほうが馴染みのある方法ですね。

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

ヘッダにこの記述を追加したものが、以下の表示です。htmlの記述はまったく同じですが、telリンクにならなくなりました。

Edge以外のブラウザで見ている方はこちらをどうぞ。

レスポンシブの場合は、
format-detectionでtelリンクをすべて無効にする+UAを判定してスマホの時だけtelリンクを有効にする
といった対応が現実的かと思います。

スマホが、「数字だけの文字列を電話番号として認識して、自動的にtelリンクにする」というのはわかります。スマホには、電話をかける機能が標準装備されているので。(とはいえ、結局、制作サイドは自動でtelリンクをはらないようにしてしまいますが)
スマホブラウザと違って、PCで広く利用されるであろう前提のEdge(とIE11)に、どうしてこういう機能を実装したんでしょうか。謎です。
謎ですが、回避する方法はあるので、今後はEdge対策として、PCのみのサイトであってもformat-detectionを入れておいたほうがいいでしょう。

参考サイト

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら