html - iOS tel:和mailto:链接仅适用于target =“_ blank”

Question

我知道这个问题已经发布了很多，但是我找不到适合我的全球解决方案。

我有以下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/

此处的mailto和tel链接可在android和台式机上完美运行，但不适用于iOS。

我在Stack Overflow和其他网站上浏览了很多帖子，而我在iOS上唯一能找到的解决方案是添加target="_blank"。

尽管对于某些人来说这可能是一个解决方案，但这对我来说还不够好。在链接中添加target="_blank"会导致空白页面在台式机和Android上均打开，从而给用户带来糟糕的体验。

有没有人能够找到可以解决所有情况的解决方案。

对于一些额外的信息，我正在使用最新的Bootstrap框架。

希望有人能帮忙。

Answer 1

如果您根本可以将其视为一个答案，这是一个较晚的答案，但是我最近遇到了一个变体，并取得了一些进展。

基本上，看来target="_blank"链接确实需要mailto，它们才能在iOS / Safari(在最新版本中)一致地工作。

那么Android呢？经过一些测试-只要您旁边没有target="_blank"，您也可以为Android / Chrome设置rel="noopener"。为什么？!谁知道？没人愿意记录下来，或者我的谷歌搜索功能使我失败了。

测试您自己的理智:
https://jsfiddle.net/f31psnhx/2/