在Windows 10边缘浏览器中驯服自动电话号码

时间:2015-07-30 08:30:36

标签: css windows-10 microsoft-edge

即使系统上没有安装手机应用程序,Windows 10的边缘浏览器似乎也会检测到手机号码。

它将电话号码格式化为蓝色并带有下划线,即使它只是在纯文本的某处(某些背景上很难看),而且它会检测到例如增值税号码就好像是电话号码一样。

那么我们如何控制它作为网站管理员:

  • 它如何呈现检测到的东西(我想MSFT为这些东西发明了他们自己的CSS选择器?)

  • 我们如何关闭检测

最好只使用针对该浏览器的内容而不是为其他人搞乱或者将非标准内容添加到其他有效代码中的风险。

编辑:

  • 建议的基于IE11 for Windows phone的方式关闭检测的方法在我的所有测试中都不起作用。元标记失败,非标准html属性似乎确实有效。

  • 我看过边缘检查的东西,在我看来,如果没有检测到那些检测到的项目的计算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>
&#13;
&#13;
&#13;

测试用例2:非标准html属性(有效)

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:27)

显然,Internet Explorer 11中引入了电话号码检测,但桌面上没有。

以下是控制它的方法,取自这篇MS文章:Phone number format recognition

  • 要禁用元素(及其子元素)的行为,请将x-ms-format-detection属性设置为“none”。
  • 要禁用网页的行为,请使用元元素:

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

  • 要启用元素(及其子元素)的行为,请将x-ms-format-detection属性设置为“phone”或“all”。

  • 要使用JavaScript有选择地控制行为,请使用setAttribute更改关联元素或其父元素的x-ms-format-detection属性的值。 (请注意,这需要在元素或父元素在DOM中呈现之前完成;不支持动态更改。)

如果我理解正确的文章,如果在浏览器级别禁用手机检测,则会忽略x-ms-format-detection属性(或元标记)。

答案 1 :(得分:5)

使用x-ms-format-detection="none"为我工作。但是我必须将它添加到父元素。

例如我的电话号码包含在一个span类中,因此我必须将其添加到上面的父div。直接添加到span标记并没有为我解决问题。

希望有所帮助

答案 2 :(得分:1)

我找到了一种适合我的方式,它包括更改标签,你可以用“a”(锚)代替你可能拥有的任何一个,而不需要href。然后,将text-underline设置为none并将颜色设置为继承。就是这样。

答案 3 :(得分:0)

如果添加x-ms-format-detection =&#34; none&#34;对于body标签,它将应用于整个页面。

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

答案 4 :(得分:0)

这应该是评论,但我还没有声誉,对不起!

基于jfrej的先前答案和Ben Hillier的后续评论,我想指出x-ms-format-detection="none"可以用于span元素,但默认情况下不能使用{{1 }},而是使用display: inline来设置跨度。

类似地使用display: inline-block也不起作用。