Question

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

<meta name = "format-detection" content = "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。

Answer 1

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

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

到

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

Answer 2

在tel link load

之后输入

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();
    });
}

Answer 3

元标记可以使用：

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

Safari浏览器未正确显示更新的页面。将其他文本更改为页面并刷新，将显示更改。如果您已经按照这种方式查看，只需添加元标记仍然会显示将该号码解释为电话号码的页面。

Answer 4

好的，修好了..添加一个<a href link>并设置它没有文字装饰...我在asp.net中使用asp：超链接控件并且它在3.2上工作，所以不确定为什么它在4.2中停止，但使用标准链接有效。

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

4 个答案: