Html 在 iPad 桌面网络链接上禁用电话号码检测？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4268413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable telephone number detection on iPad desktop web links?
提问by McDowell
I'm developing a web application that will be launched from a desktop icon on an iPad as a full-screen application. The Apple documentation on phone linksrecommends using this meta tag:
我正在开发一个 Web 应用程序，它将作为全屏应用程序从 iPad 上的桌面图标启动。电话链接上的Apple 文档建议使用此元标记：
<meta name = "format-detection" content = "telephone=no">
However, this does not appear to work. Is there any other HTML/CSS/JavaScript mechanism to control this behaviour?
但是，这似乎不起作用。是否有其他 HTML/CSS/JavaScript 机制来控制这种行为？
The random injection of anchor tags is causing me a lot of CSS bugs.
锚标签的随机注入给我带来了很多 CSS 错误。
Workaround
解决方法
One hack I've found to work is to inject special space characters, but the thought of transforming all my data on output does not fill me with joy. Such characters bring their own issues to the table. Doing this will be further complicated by AJAX and JavaScript transformations.
我发现一种可行的技巧是注入特殊的空格字符，但是转换输出上的所有数据的想法并没有让我感到高兴。这些角色将自己的问题摆在桌面上。这样做会因 AJAX 和 JavaScript 转换而变得更加复杂。
Reproducing
再现
Steps to reproduce:
重现步骤：
- Open the page on iPad Safari
- Use the Add to Home Screenbookmark function
- Launch the Home Screenicon
- 在 iPad Safari 上打开页面
- 使用添加到主屏幕书签功能
- 启动主屏幕图标
Sample page:
示例页面：
<!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: 1555555
<br />
inconvenient: 1555555
</body>
</html>
Notes
笔记
This questionseems to be related, but it lacks detail and I'm not sure if the behaviour is identical on the iPhone. This is a web application and has no native component. iPad version 3.2.2.
这个问题似乎是相关的，但它缺乏细节，我不确定 iPhone 上的行为是否相同。这是一个 Web 应用程序，没有本机组件。iPad 版本 3.2.2。
回答by P.Brian.Mackey
The meta tag works for me in asp.net. My guess is that it did not work for the OP because the HTML is not well formed. Non-IE, Mozilla browsers have issues with malformed XML/Html. Change
元标记在 asp.net 中对我有用。我的猜测是它对 OP 不起作用，因为 HTML 格式不正确。非 IE、Mozilla 浏览器存在格式错误的 XML/Html 问题。改变
<meta name = "format-detection" content = "telephone=no">
<meta name = "format-detection" content = "telephone=no">
to
到
<meta name = "format-detection" content = "telephone=no" />
<meta name = "format-detection" content = "telephone=no" />
回答by P.Brian.Mackey
Put this after 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();
});
}
回答by Beta Projects
The meta tag will work:
元标记将起作用：
<meta name="format-detection" content="telephone=no" />
It's the Safari browser not showing your updated page correctly. Make some other text change to the page and refresh and the changes will appear. Just adding the meta tag will still show the page with the number interpreted as a telephone number if you already viewed it that way.
这是 Safari 浏览器没有正确显示您更新的页面。对页面进行一些其他文本更改并刷新，更改将出现。如果您已经以这种方式查看过，只需添加元标记仍会显示该号码被解释为电话号码的页面。
回答by larryl
ok, fixed it.. add an <a href link>and style it with no text-decoration... I was using the asp:hyperlink control in asp.net and it worked on 3.2, so not sure why it stopped in 4.2, but using a standard a link works.
好的，修复它..添加一个<a href link>和样式，没有文本装饰......我在asp.net中使用asp：超链接控件并且它在3.2上工作，所以不确定为什么它在4.2中停止，但使用标准一个链接有效。
