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 links recommends using this meta tag:
<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?
The random injection of anchor tags is causing me a lot of CSS bugs.
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.
Reproducing
Steps to reproduce:
- Open the page on iPad Safari
- Use the Add to Home Screen bookmark function
- Launch the Home Screen icon
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 question seems 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.
See Question&Answers more detail:os
