台風が近づいてきていて雨がすごいですね。
我が家ではやっと衣替えをしました。
さて、今更ではありますがサイトを制作していて各ブラウザでチェックをしていると
Microsoft Edgeで電話番号に勝手にリンクがついている！
ってことありますよね？
先週、社内でどうやってリンクを消しているのか、cssでどういった対応しているのか
という話が出ていろんなやり方があったので備忘録としてまとめておきます。
Microsoft Edge自体、windouws10に実装されていて、使用率は大体5％程度ほどのようですが
それでも使用している人がいるということでサイト制作の際にはチェックの必要があります。
マイクロソフトは、このEdgeを「Webkit系ブラウザと同じ動作をするブラウザ」と位置づけており、
Webkit（Safari）、Blink（Chrome）、Gecko（Firefox）などのレンダリングエンジンとの互換性を高めるために
IE固有の機能（ActiveX、VBScript、Silverlight等）を削除しています。
なおかつWeb標準に対応したブラウザとして設計しているそうです。
それであれば、本来ならWebkit系ブラウザと同じ挙動になってくれればいいものの、さすがです、ちょっと癖があります。笑
タグ設定していなくても、勝手に”tel:00000000000”が入っている使用になるので
例えば
<p>000-0000-0000</p>
のようにHTMLを記述しpタグにcssを指定しても、Microsoft Edgeではcssが効いていなかったりします。
やっかい～！！
私が実際にやってみた（やっていた）対処法をご紹介します。
aタグの回避方法1
電話番号として扱わない文字列に、x-ms-format-detection属性を指定します。
<p x-ms-format-detection="none">000-0000-0000</p>
こういった感じです。
「none」にするとリンクが無効、「phone」または「all」にするとリンクが有効になります。
1つ1つ指定するのが手間ですが、サイト内に電話番号が大量になければ、構築時にx-ms-format-detection属性を指定してあげたほうが
後々の手間が省けます。
これはPCでは完全に省かれますが、スマホでは指で押せば電話を掛けられるようになる仕様ですのでおすすめです。
私はこれを使用するようにしています。
aタグの回避方法2
<meta name="format-detection" content="telephone=no">
内にmetaタグの要素としてこれをいれておけば”どんなときでも”電話番号にリンクが付きません。 スマホでも外れます。一括すべて無効にできるので、手軽なのですがスマホでも外れてしまうので そこだけは注意が必要です。
jQueryでスマホとPCを分割する方法はいろんなサイトで紹介されていますが、”tel:00000000000”で入っていることが前提のもの
なので入っているものに関してはjQueryで指示してあげると早いかもしれませんね！
参考になればと思います♪
お好きなほうを試してみてください！