如何在 Mobile Safari 中禁用电话号码链接？

StackOverflow https://stackoverflow.com/questions/226131

  •  03-07-2019
  •  | 
  •  

题

iPhone 上的 Safari 会自动为电话号码中出现的数字字符串创建链接。我正在编写一个包含 IP 地址的网页，Safari 正在将其转换为电话号码链接。是否可以对整个页面或页面上的某个元素禁用此行为？

有帮助吗？

解决方案

这似乎是正确的做法，根据 Safari HTML参考：

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

如果您禁用此功能但仍需要电话链接，您仍然可以使用<！>“tel <！>”; URI方案。

这是相关页面。

其他提示

要禁用特定元素的手机解析外观，这个CSS似乎可以解决问题：

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

第一个规则禁用点击，第二个规则负责样式。

我遇到了同样的问题。我在UIWebView上找到了一个属性，允许您关闭数据检测器。

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

添加此内容，我认为这是您正在寻找的内容：

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

我使用零宽度木匠&zwj;

把它放在电话号码的某个地方，它对我有用。在BrowserStack中测试（和Litmus用于电子邮件）。

Webview解决方案！

对于PhoneGap-iPhone / PhoneGap-iOS应用程序，您可以通过将以下内容添加到项目中来禁用电话号码<！>＃8217;应用程序代表：

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

来源：在PhoneGap中禁用电话检测-iOS 。

要在页面的一部分上禁用电话号码检测，请将​​受影响的文本包含在带有 href="#" 的锚标记中。如果您这样做，移动 Safari 和 UIWebView 应该不理会它。 

<a href="#"> 1234567 </a>

认为我找到了一个解决方案：将数字放在<label>元素中。没有尝试过任何其他标签，但是<div>将其保留在主屏幕上，即使使用telephone=no属性也是如此。

从早期的评论中可以明显看出，元标记确实有效，但由于某些原因，在iOS的后续版本中已经破解，至少在某些条件下。我正在运行4.0.1。

您还可以将<a>标签与javascript: void(0)一起用作href值。

示例如下：
<a href="javascript: void(0)">+44 456 77 89 87</a>

我也遇到了同样的问题，但是是在 iPad 网络应用程序上。

不幸的是，两者都没有...

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

也不...

&#48; = 0
&#57; = 9

...工作了。

但是，这里有三个丑陋的黑客：

  • 将数字“0”替换为字母“O”
  • 将数字“1”替换为字母“l”
  • 插入一个无意义的跨度：例如。， 555.5<span>5</span>5.5555

根据您使用的字体，前两个几乎不明显。后者显然涉及多余的代码，但对用户来说是不可见的。

Kludgy hacks肯定是可行的，如果你从数据动态生成代码，或者你不能以这种方式污染你的数据，那么它可能不可行。

但是，在紧要关头足够了。

我有一个ABN（澳大利亚商业号码），iPad Safari坚持要转变为电话号码链接。这些建议都没有帮助。我的解决方案是在数字之间放置img标签。

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

该类仅用于记录img标记的用途。

适用于iPad 1（4.3.1）和iPad 2（4.3.3）。

我的经验与其他人提到的相同。元标记...... 

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

...当网站在Mobile Safari中运行时（即使用chrome），但在作为webapp运行时停止工作（即，保存到主屏幕并且不使用chrome运行）。

我不太理想的解决方案是将值插入输入字段...... 

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

这不太理想，因为尽管边框设置为无，但iOS会在字段上方呈现一个多像素的灰色条。但是，它比将数字视为链接更好。

我自己对此进行了测试，发现虽然它肯定不是一个优雅的解决方案，但它仍然有效。在电话号码中插入空跨度将阻止数据检测器将其转换为链接。

(604) 555<span></span> -4321

<meta name = "format-detection" content = "telephone=no">不适用于电子邮件：如果您准备的HTML是电子邮件，则会忽略元标记。

如果您定位的是电子邮件，那么这是另一个丑陋但又有效的解决方案：

您希望避免链接或自动格式化的某些HTML示例：

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

将使魔术发生的CSS：

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

缺点：您可能需要为每个ipad / iphone纵向/横向组合进行媒体查询

您可以尝试将它们编码为HTML实体：

&#48; = 0
&#57; = 9

在使用index.html of app中的元标记（<meta name="format-detection" content="telephone=no">）解决了Sencha Touch应用中的相同问题。

我使用的不仅仅是Mobile Safari的技巧是使用HTML转义码和电话号码中的一点标记。这使得浏览器更难以<！>“识别<！>”;电话号码，即

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

我也有这个问题：Safari和其他移动浏览器会将VAT ID转换为电话号码。所以我想要一个干净的方法来避免它在单个元素上，而不是整个页面（或网站） 我正在分享一个我发现的可能的解决方案，它不是最理想但仍然非常可行：我把数字放在我不想成为tel:链接的内部，&#8288; HTML实体是 Word-Joiner隐形字符。我试图通过将这个char放在某个意义上的位置来保持更多的语义（好吧，至少是某种类型），例如对于增值税ID，我选择根据其格式将其放在不同的数字组之间对于意大利增值税我写道：0613605&#8288;048&#8288;8在0613605中呈现<！>＃8288; 048 <！>＃8288; 8并且它没有在电话号码中转换。

另一种选择是用字符‑（U + 2011'Unicode Non-Breaking Hyphen'）替换电话号码中的连字符

我对此感到困惑了一段时间，但终于想通了。我们对我们的网站进行了更新，并将一些数字转换为链接，而另一些则没有。事实证明，如果数字在<！> lt; fieldset <！> gt;中，则不会转换为链接。对于大多数情况显然不是正确的解决方案，但在某些情况下它将是正确的解决方案。

截至2012年6月13日，这个答案胜过一切：

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

将颜色更改为与文本匹配的颜色，文本修饰删除下划线，指针事件阻止它被视为浏览器中的链接（指针不会变为手）

这非常适合在ios和浏览器上发送HTML电子邮件。

为什么要删除链接，这使得用户非常友好。

如果您只是想删除自动编辑，但保持链接正常工作只需将其添加到您的CSS ... 

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

将数字分解为单独的文本块

301 <div style="display:inline-block">441</div> 3909

另一种解决方案是使用IP号

的图像
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top