禁用 iPad 桌面 Web 链接上的电话号码检测？答案

【问题标题】：Disable telephone number detection on iPad desktop web links?禁用 iPad 桌面 Web 链接上的电话号码检测？
【发布时间】：2010-11-24 15:22:56
【问题描述】：

我正在开发一个 Web 应用程序，该应用程序将从 iPad 上的桌面图标作为全屏应用程序启动。 Apple documentation on phone links 推荐使用这个元标记：

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

但是，这似乎不起作用。是否有任何其他 HTML/CSS/JavaScript 机制来控制这种行为？

锚标签的随机注入给我带来了很多 CSS 错误。

解决方法

我发现一个可行的技巧是注入特殊的空格字符，但是在输出中转换我的所有数据的想法并没有让我感到高兴。这些角色将他们自己的问题摆在桌面上。 AJAX 和 JavaScript 转换会进一步复杂化。

复制

重现步骤：

在 iPad Safari 上打开页面。
使用添加到主屏幕书签功能。
启动主屏幕图标。

示例页面：

<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name = "format-detection" content = "telephone=no">
<title>Telephone detect</title>
</head>
<body>
expected:
<a href="tel:1555555">1555555</a>
<br />
bad: 1555555
<br />
bad: &#x31;&#x35;&#x35;&#x35;&#x35;&#x35;&#x35;
<br />
inconvenient: 1&#xFEFF;555555
</body>
</html>

注意事项

This question 似乎是相关的，但它缺乏细节，我不确定 iPhone 上的行为是否相同。这是一个 Web 应用程序，没有本机组件。 iPad 3.2.2 版。

【问题讨论】：

注意：我发布此问题已有数年了，无法评论该问题是否存在于更新的软件版本中，也无法验证任何建议的解决方案。跨度>

标签： ipad html

【解决方案1】：

元标记在 asp.net 中对我有用。我的猜测是它不适用于 OP，因为 HTML 格式不正确。非 IE、Mozilla 浏览器存在格式错误的 XML/Html 问题。改变

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

到

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

【讨论】：

标记是 HTML 5，其中/ 对void elements 没有影响，例如meta。我不再在这个领域工作，也没有要测试的 iPad，所以无法检查 spec 的行为。

【解决方案2】：

把这个放在电话链接加载之后

if (navigator.userAgent.match(/(iPhone|Android|BlackBerry)/)) {
//this is the phone

} else if (navigator.userAgent.match(/(iPod|iPad)/)) {
    $('a[href^=tel]').click(function(e){
       e.preventDefault();
    });
} else {
 //this is the browser

    $('a[href^=tel]').click(function(e){
        e.preventDefault();
    });
}

【讨论】：

为什么需要第二个 if 块？它不和 else 块做同样的事情吗？

【解决方案3】：

好的，修复它.. 添加<a href link> 并设置没有文本装饰的样式... 我在 asp.net 中使用 asp:hyperlink 控件，它在 3.2 上工作，所以不知道为什么它停止了4.2，但使用标准链接有效。

【讨论】：

我很感激你的努力，这个解决方案可能适合一些人，但它引入了其他必须克服的问题（比如把东西变成制表位；可访问性问题——这些东西仍然必须在其他浏览器上工作）。