web-dev-qa-db-ja.com

Windows 10 Edgeブラウザーで自動電話番号を使いこなす

Windows 10のEdgeブラウザーは、システムに電話アプリがインストールされていない場合でも電話番号を検出するようです。

電話番号は、どこかにプレーンテキスト（一部の背景では見苦しい）であっても、下線付きの青色でフォーマットされます。電話番号であるかのようにVAT番号。

それで、ウェブマスターとしてどのように制御しますか：

  • 検出されたものをどのようにレンダリングするか（MSFTがこのような独自のCSSセレクターを発明したと思いますか？）

  • どのようにして検出をオフにしますか

できれば、そのブラウザをターゲットにするだけで、他の人のために物事を台無しにしたり、そうでなければ有効なコードに非標準のものを追加したりする危険はありません。

編集：

  • IE11でWindows Phone用に行われた方法に基づいて検出をオフにする推奨方法は、すべてのテストで機能しません。メタタグが失敗し、非標準のhtml属性が機能しているようです。

  • 私はEdgeで検査したものを見ましたが、検出されたアイテムの計算されたCSSは、検出されなかった場合にそこに表示されるはずです（つまり、計算されたCSSは通常の色であり、下線はありません）レンダリング方法を制御する機会はほとんどありません。

編集：

テストケース1：メタタグ（失敗）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- test -->
    <meta name="format-detection" content="telephone=no" />
  </head>
  <body>
    <p>text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>

テストケース2：非標準のHTML属性（機能）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p x-ms-format-detection="none">text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>
csswindows-10microsoft-edge
28
user3277192

電話番号の検出はInternet Explorer 11で導入されたようですが、デスクトップではそうではありません。

このMS記事から引用した、それを制御する方法は次のとおりです。 電話番号形式の認識

  • 要素（およびその子要素）の動作を無効にするには、x-ms-format-detection属性を「なし」に設定します。
  • Webページの動作を無効にするには、meta要素を使用します。

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

  • 要素（およびその子要素）の動作を有効にするには、x-ms-format-detection属性を「phone」または「all」に設定します。

  • JavaScriptを使用して動作を選択的に制御するには、setAttributeを使用して、関連要素またはその親のx-ms-format-detection属性の値を変更します。 （これは、DOMで要素または親がレンダリングされる前に行う必要があることに注意してください。動的な変更はサポートされていません。）

記事を正しく理解し、ブラウザレベルで電話の検出が無効になっている場合、x-ms-format-detection属性（またはメタタグ）は無視されます。

27
jfrej

x-ms-format-detection="none"私のために働いた。ただし、親要素に追加する必要がありました。

たとえば、私の電話番号はspanクラスでラップされているため、上記の親divに追加する必要がありました。 spanタグに直接追加しても、Edgeの問題は解決しませんでした。

役立つことを願っています

5
MikeBurgess

私にぴったりの方法を見つけました。これは、hrefを必要とせずに、持っているタグの代わりに "a"（アンカー）を使用して、番号を持つタグを変更することで構成されています。次に、text-underlineをnoneに設定し、colorを継承します。それで全部です。

1
Jordi

Bodyタグにx-ms-format-detection = "none"を追加すると、ページ全体に適用されます。

<body x-ms-format-detection="none">
0
zefram