In Apple devices like iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s an excellent feature for user expertise, however the systems add their own styling to the numbers, i.e. typically they’re blue and underlined. This is smart as a default, it’s the normal link styling.
If you have a bright design with white background it’s not so bad. The problem is that the link’s default colour is blue and is almost completely unreadable on sites with dark backgrounds. The worst part is it makes us look bad and not Apple.
So how to fix it, here are 3 ways to fix it.
1. The Meta Tag Options
This option includes a specialized Meta tag which can disable phone number linking in iOS. We placed the following declaration in theof our email:
<meta content=”telephone=no” name=”format-detection”>
But if client like this functionality that they click a phone number and device will initiate a phone call than this solution is not good. So here we present second option.
2. The CSS Option
iOS adds the text “tel” to the href value. Their phone number links are coded one thing like this:
473 478-8329
Target links with href values starting with tel by using this css attribute selector:
a[href^=tel] {
color: inherit;
text-decoration: none;
}
3. Styling Mail’s Data Detector Selector
when you can’t set a meta tag such as in html email wrap phone numbers in link/anchor tags like <a href=”#” x-apple-data-detectors=”true”> and then target their styles using css similar to the following and adjust the specific properties you need to reset:
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
If you want to target specific links, use classes on your links and then update the CSS selector above to a[x-apple-data-detectors].class-name.
I hope this post is usable and helpful for you. If you have query related to iphone application development. Freely contact us. Our experienced wp developer happy to solve your query.
