href=tel:555 link not working in mobile safari

Question

I'm designing a mobile page and am using the following (standard, I believe) code to make the phone dial a phone number.

<a href="tel:555-1234567" class="call"><img src="graphics/call-icon.gif" alt="call-icon" width="45" height="50"></a>

This works fine in android but Mobile Safari I get the following error:

Cannot Open Page
Safari cannot open the page because the address is invalid

Did you try to remove the dash from the phone number? I.e. keep digits only. — ulidtko, Oct 10 '11 at 15:52
See this link http://stackoverflow.com/questions/1164004/how-to-mark-up-phone-numbers — zeenfaiz, Jul 09 '13 at 11:05
If you are using the simulator and you don't have the phone App it won't work. https://stackoverflow.com/a/13373055/317832 — Sanchitos, Jun 10 '21 at 15:35

Ben · Accepted Answer · 2011-10-11T06:24:55.047

15

Your mark-up is fine, and it works on my iPhone (3GS, running 4.3.5). It doesn't work on the iOS simulator (yep, there's the "Cannot Open Page - Safari cannot open the page because the address is invalid" error), but then I wouldn't expect it to, given that you can't make calls on it (either that or the older version of iOS is at fault).

edited Oct 11 '11 at 06:24

answered Oct 10 '11 at 20:17

Ben

7,548
31
45

1

This is still happening in 2018… – nils Jan 30 '18 at 10:49
5

...and still happening in 2020 – Lucio Apr 06 '20 at 08:33
2

You need to provide a full phone number, including country prefix. Then in Safari, at least version 14, works all fine. – Cezary Tomczyk Dec 29 '20 at 19:16
... and still 2023 – mukolweke Jan 12 '23 at 14:48

score 11 · Answer 2 · answered Oct 10 '11 at 15:54

11

In your <head> put:

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

From Safari HTML Reference:

This Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS. Syntax Discussion By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature. Availability Available in iOS 1.0 and later. Support Level Apple extension.

answered Oct 10 '11 at 15:54

chown

51,908
16
134
170

I just thought I'd add, that after Safari does this trick, the phone number "1-555-555-5555" turns into `1-555-555-5555` – Graham P Heath Sep 19 '13 at 15:28
Elegant streamlined approach, but unfortunately does not work on Chrome for iOS. – Chad Jun 18 '18 at 22:23

score 6 · Answer 3 · answered Oct 10 '11 at 15:54

6

for a telephone number to work in Safari/iOS you need to format the telephone properly like it would be listed in an old ad.

<a href="tel:1-555-123-4567" class="call">
----- OR -----
<a href="tel:15551234567" class="call">

answered Oct 10 '11 at 15:54

James Williams

4,221
1
19
35

Nope, still get the same error. I also added the meta taag from your answer chown to no avail. I've also tried the link set to tel:171 which is the standard voicemail number in Ireland. – Iolo Oct 10 '11 at 17:00
I appreciate the flexibility that this option provides, not to mention compatibility with Chrome on iOS. (Verified working for Chrome and Safari on iOS 10.2.1) This answer seems to have stood the compatibility test of time. – Chad Jun 18 '18 at 22:21

score 5 · Answer 4 · edited Sep 25 '19 at 17:35

5

You may want to add target="_blank" in the hyperlink tag.

It works for me.

Read more about target="_blank" at this link

edited Sep 25 '19 at 17:35

funkymushroom

2,079
2
26
39

answered Sep 25 '19 at 17:07

ArchyBean

51
1
1

Bryan Labuschagne · Answer 5 · 2019-06-04T13:39:52.777

1

If you still have a problem with your telephone number not showing up on safari i had the exact same problem, i picked up that if you do not use a web friendly font it will not display try and change your font for the number to Verdana or Arial. I used google web font which should be web friendly but even that broke my number.

Hope this works.

edited Jun 04 '19 at 13:39

answered Jan 19 '15 at 09:51

Bryan Labuschagne

203
1
8

score 1 · Answer 6 · answered Dec 14 '21 at 15:45

1

<a class="font-13 color-theme" onclick="window.open('tel:+84935002102');">Call</a>

answered Dec 14 '21 at 15:45

Wang Nguyen

11
1

score 0 · Answer 7 · answered May 06 '20 at 18:08

0

The following worked for me, hope it helps.

<a href="javascript:void(0)" onclick="window.location='tel:8005555555'" class="call">800 555 5555</a>

It should work on both ios chrome and safari.

answered May 06 '20 at 18:08

Muhammad Russell

361
4
13

Luis Santana · Answer 8 · 2021-02-08T22:44:38.767

2021 Update here, I'm building an Ionic app for android and ios, and was having troubles getting the link for phones to work in safari, what I did that solved the issue was creatig a small utility function (typescript) that cleared the phone number of any characters this way:

cleanPhoneNumber(text: string): string {

    const cleanText = text.trim()
        // INITIAL CHAR
        .replace(/\+/g, '')
        // COMMON SEPARATORS
        .replace(/\-/g, ' ').replace(/\./g, ' ')
        // RARE CHARACTERS
        .replace(/\_/g, '').replace(/\,/g, '').replace(/\:/g, '').replace(/\;/g, '').replace(/\~/g, '');

    return cleanText;
}

Characters like "+" or "-" cause safari to not handle href:tel properly (despite Chrome or Firefox working fine with that)

Hope this helps somebody else that is new like me building apps for ios

href=tel:555 link not working in mobile safari

8 Answers8