iOS tel: and mailto: links only work with target=“_blank”

Question

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.

Answer 1

This is a bit of a late answer, if you can even consider this an answer at all, but I've recently encountered a variation of this and made some progress.

Basically, it seems you do need target="_blank" for mailto links for them to work consistently in iOS/Safari (across recent versions).

What about Android? After some testing - you can have target="_blank" for Android/Chrome as well, as long as you do NOT have rel="noopener" next to them. Why?! Who knows? Either nobody bothered documenting this or my googling powers have failed me.

Test it for your own sanity: https://jsfiddle.net/f31psnhx/2/