I know that this question has been posted around a lot but I am unable to find a global solution that works for me.
I have the following HTML:
<div class="contact-details__content-container">
<h4 class="contact-details__title">Press Enquiries</h4>
<ul class="list-unstyled contact-details__list">
<li class="contact-details__list-item">
<span class="contact-details__name">Name Name</span>
Job Title
</li>
<li class="contact-details__list-item">
<span class="contact-details__name">Name Name</span>
Job Title
</li>
<li class="contact-details__list-item">
<a href="mailto:email@email.com" title="email@email.com" class="contact-details__email">email@email.com</a>
<a href="tel:+442033333333" title="+44 (0)20 3333 3333" class="contact-details__telephone visible-xxs visible-xs">+44 (0)20 3333 3333</a>
</li>
</ul>
</div>
https://jsfiddle.net/4hyvdheu/2/
The mailto
and tel
links here work perfectly on android and desktop but do not work on iOS.
I have gone through many posts on Stack Overflow and other websites and the only solution I can find for iOS is to add target="_blank"
.
While this may be a solution for some this is not a good enough solution for me. Adding target="_blank"
to the links causes blank pages to open on both desktop and android giving a bad user experience.
Has anyone been able to find a solution that will solve all cases.
For a little extra information I am using the latest Bootstrap framework.
Hope someone can help.