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
8 answers
solution1
15 ACCPTED 2011-10-10 20:17:27
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).
solution2
9 2011-10-10 15:54:39
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.
solution3
6 2011-10-10 15:54:53
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">
solution4
4 2019-09-25 17:07:45
You may want to add target="_blank" in the hyperlink tag.
It works for me.
Read more about target="_blank" at this link
solution5
1 2015-01-19 09:51:18
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.
solution6
0 2020-05-06 18:08:04
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.
solution7
0 2021-02-08 22:37:27
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
solution8
0 2021-12-14 15:45:18
<a class="font-13 color-theme" onclick="window.open('tel:+84935002102');">Call</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.