Safari on iPhone automatically converts any number on your webpage that takes the form of a phone number to a phone link. When the user taps a phone link, a dialog appears asking whether the user wants to dial that phone number. If the user taps the Call button in the dialog, the Phone application launches and dials the phone number. You can also add your own phone links to your webpage or disable telephone number detection.
The syntax of a telephone link is:
<a href="tel:1-408-555-5555">1-408-555-5555</a> |
Telephone number detection is on by default. Therefore, if your webpage contains numbers that can be interpreted as phone numbers, but are not phone numbers, you can turn off telephone number detection. You might also turn off telephone number detection to prevent the DOM document from being modified when parsed by the browser.
To turn off telephone number detection, use the format-detection meta tag as follows:
<meta name = "format-detection" content = "telephone=no"> |
For example, in Listing 5-1, automatic telephone number detection is off. Therefore, the 408-555-5555 telephone number does not appear as a link when rendered by Safari on iPhone. However, the 1-408-555-5555 number does appear as a link because it is in a phone link.
Listing 5-1 Turning telephone number detection off
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > |
<head> |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
<title>Telephone Number Detection</title> |
<meta name = "viewport" content = "width=device-width"> |
<!-- Turn off telephone number detection. --> |
<meta name = "format-detection" content = "telephone=no"> |
</head> |
<body> |
<!-- Then use phone links to explicitly create a link. --> |
<p>A phone number: <a href="tel:1-408-555-5555">1-408-555-5555</a></p> |
<!-- Otherwise, numbers that look like phone numbers are not links. --> |
<p>Not a phone number: 1-408-555-5511</p> |
</body> |
</html> |
Clicking a phone link displays an unsupported dialog if the Phone application is not installed on the device.
Last updated: 2008-02-05