12

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" conten ="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:

  1. Open the page on iPad Safari.
  2. Use the Add to Home Screen bookmark function.
  3. 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: &#x31;&#x35;&#x35;&#x35;&#x35;&#x35;&#x35;
<br />
inconvenient: 1&#xFEFF;555555
</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.

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
McDowell
  • 107,573
  • 31
  • 204
  • 267
  • Note: it's been a number of years since I posted this question and am not in a position to comment on whether the issue is present in more recent software versions nor can I verify any proposed solutions. – McDowell Jul 17 '14 at 08:13

3 Answers3

7

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

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

to

<meta name = "format-detection" content = "telephone=no" />
Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348
  • 3
    The markup is HTML 5, where the `/` has no effect on [void elements](http://dev.w3.org/html5/spec/Overview.html#void-elements) such as `meta`. I no longer work in this area and don't have an iPad to test on, so can't check behaviour against the [spec](http://dev.w3.org/html5/spec/Overview.html#start-tags). – McDowell Jul 21 '11 at 17:42
3

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();
    });
}
trevorp
  • 1,161
  • 1
  • 14
  • 19
  • 1
    Why is the second if block necessary? Doesn't it do the same thing as the else block? – webXL Sep 17 '13 at 18:06
1

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.

McDowell
  • 107,573
  • 31
  • 204
  • 267
larryl
  • 11
  • 1
  • 1
    I appreciate the effort and this solution might suit some, but it introduces other issues that have to be overcome (like turning things into tabstops; accessibility issues - this stuff still has to work on other browsers). – McDowell Dec 05 '10 at 14:06