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
The issue can be related to a click event handler which might be preventing the default behaviour of the link. For example, return:false in the end of the handler might be preventing this behaviour. Try checking that and remove it. This should fix the problem.
Href=tel: creates the call link. This tells the browser how to use the number. “Tel: 123-456-7890 “creates the HTML phone number. The number within the quotes is the number it will call.
The tel URL scheme is used to launch the Phone app on iOS devices and initiate dialing of the specified phone number. When a user taps a telephone link in a webpage, iOS displays an alert asking if the user really wants to dial the phone number and initiates dialing if the user accepts.
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).
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.
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">
You may want to add target="_blank"
in the hyperlink tag.
It works for me.
Read more about target="_blank"
at this link
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With