I need to build a web page for mobile devices. There's only one thing I still haven't figured out: how can I trigger a phone call through the click of text?
Is there a special URL I could enter like the mailto: tag for emails?
Device specific solution are not preferred.
I know iPhone automatically recognizes phone numbers and creates a link for this, but it would be great if this could be done for images too... and also for most mobile devices.
Essentially, use an <a> element with an href attr pointing to the phone number prefixed by tel:. Note that pluses can be used to specify country code, and hyphens can be included simply for human eyes.
MDN Web Docs
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link
The HTML
<a>element (or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.[…]
Offering phone links is helpful for users viewing web documents and laptops connected to phones.
<a href="tel:+491570156">+49 157 0156</a>
IETF Documents
https://www.rfc-editor.org/rfc/rfc3966
The
telURI for Telephone NumbersThe "tel" URI has the following syntax:
telephone-uri="tel:"telephone-subscriber[…]
Examples
tel:+1-201-555-0123: This URI points to a phone number in the United States. The hyphens are included to make the number more human readable; they separate country, area code and subscriber number.
tel:7042;phone-context=example.com: The URI describes a local phone number valid within the context "example.com".
tel:863-1234;phone-context=+1-914-555: The URI describes a local phone number that is valid within a particular phone prefix.
Just use HTML anchor tag <a> and start the attribute href with tel:. I suggest starting the phone number with the country code. pay attention to the following example:
<a href="tel:+989123456789">NO Different What it is</a>
For this example, the country code is +98.
Hint: It is so suitable for cellphones, I know tel: prefix calls FaceTime on macOS but on Windows I'm not sure, but I guess it caused to launch Skype.
For more information: you can visit the list of URL schemes supported by browsers to know all href values prefixes.
At this time (2021) to work in PC or Tablet and Android (dont tested in IOS but should works) you need add data-rel="external" to the "a" tag, example:
<a href="tel:+576015000000" data-rel="external">Call Me...</a>