DevBlogs
How to disable phone number detection on mobile devices?
5 minutes read
Jump to solution…
View SolutionThe Problem
Phone number detection is a great accessibly feature introduced on mobile phones or devices with calling functionality to enable a user to tap on a number number to place a call. There’s no denying that’s great.
However, in some situations this isn’t desirable such as outputting strings of numbers such as order numbers. In some case, under the correct circumstances the browser converts these strings into clickable links, which isn’t so great. Not only does this not look good but can also lead users to click and call non-existent numbers.
The Solution
The solution to this problem is simple, you can disable the automatic detection of phone number in Safari by add the meta tag format-detection to the <head> of the site.
<meta name="format-detection" content="telephone=no">This code will stop Safari from automatically detecting a phone number and turning it into a link.
If you’re experiencing issues with the styling of these automatic detection links, they act in the same way as a basic links and will inherit the same styling and CSS as other links on the page. Therefore you can quickly style them like any other.
Accessibility Considerations
It’s important to ensure your website or application is as accessable ad possible, disabling this detection to avoid styling or layout issues will remove a users ability to click the number and open the phone application.
If you still want users to be able to use this functionality consider manually adding a link to the phone number and include tel: at the beginning before the number. An example of this using our phone number would be:
<a href="tel:01772237228">01772 237 228</a>For more useful meta tags which you can use in your application visit the list compiled by Kevin Suttle on GitHub including an Apple Meta Tag to prevent zoom on focus and zoom on tap.
Tue, 09 November 2021