iPhone 上的 Safari 会自动为出现在电话号码中的数字字符串创建链接。我正在编写一个包含 IP 地址的网页,而 Safari 正在将其转换为电话号码链接。是否可以对整个页面或页面上的元素禁用此行为?
23 回答
根据Safari HTML Reference,这似乎是正确的做法:
<meta name="format-detection" content="telephone=no">
如果您禁用此功能但仍需要电话链接,您仍然可以使用“tel”URI 方案。
这是 Apple 开发人员库中的相关页面。
我使用零宽度连接器‍
只要把它放在电话号码的某个地方,它就对我有用。在 BrowserStack 中测试(以及用于电子邮件的 Litmus)。
要禁用特定元素的电话解析外观,这个 CSS 似乎可以解决问题:
.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }
第一条规则禁用点击,第二条规则负责样式。
添加这个,我认为这是你正在寻找的:
<meta name = "format-detection" content = "telephone=no">
我遇到了同样的问题。我在 UIWebView 上找到了一个允许您关闭数据检测器的属性。
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
Webview 的解决方案!
对于 PhoneGap-iPhone / PhoneGap-iOS 应用程序,您可以通过将以下内容添加到项目的应用程序委托来禁用电话号码检测:
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
// disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...
要在页面的一部分上禁用电话号码检测,请将受影响的文本包装在带有 href="#" 的锚标记中。如果你这样做,移动版 Safari 和 UIWebView 应该不管它。
<a href="#"> 1234567 </a>
您还可以将<a>
标签与javascript: void(0)
作为href
值一起使用。
示例如下:<a href="javascript: void(0)">+44 456 77 89 87</a>
认为我找到了解决方案:将数字放入<label>
元素中。没有尝试任何其他标签,但<div>
它在主屏幕上保持活动状态,即使具有telephone=no
属性。
从早期的评论中可以明显看出,元标记确实有效,但由于某种原因,在后来的 iOS 版本中已经损坏,至少在某些情况下是这样。我正在运行 4.0.1。
我的经历和其他人提到的一样。元标记...
<meta name = "format-detection" content = "telephone=no">
...当网站在 Mobile Safari 中运行(即,使用 chrome)时工作,但在作为 web 应用程序运行时停止工作(即,保存到主屏幕并在没有 chrome 的情况下运行)。
我不太理想的解决方案是将值插入输入字段......
<input type="text" readonly="readonly" style="border:none;" value="3105551212">
这不太理想,因为尽管边框设置为无,iOS 仍会在字段上方呈现多像素灰色条。但是,这比将数字视为链接要好。
我有一个 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)。
我自己对此进行了测试,发现它确实有效,尽管它肯定不是一个优雅的解决方案。在电话号码中插入一个空跨度将阻止数据检测器将其转换为链接。
(604) 555<span></span> -4321
我有同样的问题,但在 iPad 网络应用程序上。
不幸的是,两者都不...
<meta name = "format-detection" content = "telephone=no">
也不...
0 = 0
9 = 9
...工作。
但是,这里有三个丑陋的黑客:
- 用字母“O”替换数字“0”
- 用字母“l”替换数字“1”
- 插入一个无意义的跨度:例如,
555.5<span>5</span>5.5555
根据您使用的字体,前两个几乎不引人注意。后者显然涉及多余的代码,但对用户是不可见的。
Kludgy 肯定会破解,如果您从数据动态生成代码,或者如果您不能以这种方式污染数据,则可能不可行。
但是,在紧要关头就足够了。
<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 纵向/横向组合进行媒体查询
为什么要删除链接,它使用户非常友好地拥有该选项。
如果您只是想删除自动编辑,但保持链接正常工作,只需将其添加到您的 CSS...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}
您可以尝试将它们编码为 HTML 实体:
0 = 0
9 = 9
Sencha Touch 应用程序中的相同问题通过应用程序<meta name="format-detection" content="telephone=no">
index.html 中的元标记 ( ) 解决。
我使用的一个不仅仅适用于 Mobile Safari 的技巧是在电话号码中使用 HTML 转义码和一些标记。这使得浏览器更难“识别”一个电话号码,即
Phone: 1-800<span>-</span>620<span>-</span>3803
我也有这个问题:Safari 和其他移动浏览器将增值税 ID 转换为电话号码。所以我想要一个干净的方法来避免它在单个元素上,而不是整个页面(或站点)。
我正在分享我发现的一个可能的解决方案,它不是最理想的,但它仍然是相当可行的:我在我不想成为tel:
链接的数字内放置了⁠
HTML 实体,它是Word-Joiner invisible character。我试图通过将这个字符放在某个有意义的地方来保持更多的语义(嗯,至少是一种),例如对于增值税 ID,我选择根据其格式将它放在不同的数字组之间,所以对于意大利增值税我写道:0613605⁠048⁠8
它呈现在 06136050488 中,并且没有转换为电话号码。
I was really confused by this for a while but finally figured it out. We made updates to our site and had some numbers converting to a link and some weren't. Turns out that numbers won't be converted to a link if they're in a <fieldset>. Obviously not the right solution for most circumstances, but in some it will be the right one.
截至 2012 年 6 月 13 日,这个答案胜过一切:
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>
将颜色更改为与您的文本匹配的任何颜色,文本装饰删除下划线,指针事件阻止它像浏览器中的链接一样被查看(指针不会变成手)
这非常适合 ios 和浏览器上的 HTML 电子邮件。
Break the number down into separate blocks of text
301 <div style="display:inline-block">441</div> 3909