href=tel:555 link not working in mobile safari

M

8

20

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

Mcvey answered 10/10, 2011 at 15:49 Comment(4)

Did you try to remove the dash from the phone number? I.e. keep digits only. – Garrulous 10/10, 2011 at 15:52

I'm testing on the iOS simulator if it may be relevant. – Mcvey 10/10, 2011 at 17:3

See this link #1164504 – Shimberg 9/7, 2013 at 11:5

If you are using the simulator and you don't have the phone App it won't work. https://mcmap.net/q/662524/-tel-numbers-not-handled-on-ios-emulator – Nebulize 10/6, 2021 at 15:35

B

16

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).

Bigamist answered 10/10, 2011 at 20:17 Comment(4)

This is still happening in 2018… – Duren 30/1, 2018 at 10:49

...and still happening in 2020 – Dovap 6/4, 2020 at 8:33

You need to provide a full phone number, including country prefix. Then in Safari, at least version 14, works all fine. – Mikael 29/12, 2020 at 19:16

... and still 2023 – Merth 12/1, 2023 at 14:48

J

12

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.

Jezreel answered 10/10, 2011 at 15:54 Comment(3)

I just thought I'd add, that after Safari does this trick, the phone number "1-555-555-5555" turns into <a href="tel:1-555-555-5555">1-555-555-5555</a> – Rema 19/9, 2013 at 15:28

Elegant streamlined approach, but unfortunately does not work on Chrome for iOS. – Martz 18/6, 2018 at 22:23

works like charm in 2024. (I am already using country prefix) – Glanti 3/5 at 11:13

S

7

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

It works for me.

Read more about target="_blank" at this link

Sankaran answered 25/9, 2019 at 17:7 Comment(0)

G

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">

Genoa answered 10/10, 2011 at 15:54 Comment(2)

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. – Mcvey 10/10, 2011 at 17:0

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. – Martz 18/6, 2018 at 22:21

V

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.

Vesting answered 19/1, 2015 at 9:51 Comment(0)

L

1

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

Lafleur answered 14/12, 2021 at 15:45 Comment(0)

A

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.

Acnode answered 6/5, 2020 at 18:8 Comment(0)

C

0

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

Community answered 8/2, 2021 at 22:37 Comment(0)

Recommended topics

Hot tags