iOS tel:和mailto:链接仅适用于target ="_ blank"

问题描述

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

I know that this question has been posted around a lot but I am unable to find a global solution that works for me.

我有以下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 protected]" title="[email protected]" class="contact-details__email">[email protected]</a>
      <a href="tel:[phone]" title="[phone]" class="contact-details__telephone visible-xxs visible-xs">[phone]</a>
    </li>
  </ul>

</div>

https://jsfiddle.net/4hyvdheu/2/

此处的mailto和tel链接在android和台式机上均能正常工作，但在iOS上则无法工作.

The mailto and tel links here work perfectly on android and desktop but do not work on iOS.

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

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".

虽然这可能是某些解决方案，但对于我来说这还不够好.在链接中添加target="_blank"会导致空白页面在台式机和android上均打开，从而给用户带来不良的体验.

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.

有关其他信息，我正在使用最新的Bootstrap框架.

For a little extra information I am using the latest Bootstrap framework.

希望有人可以提供帮助.

Hope someone can help.

推荐答案

这是一个较晚的答案，如果您甚至可以将其视为一个答案，但是我最近遇到了这种情况，并做了一些修改进度.

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.

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

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

Android呢?经过一些测试-只要您旁边没有rel="noopener"，您也可以将target="_blank"用于Android/Chrome.为什么?！谁知道?没人愿意记录下来，或者我的谷歌搜索功能使我失望了.

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.

根据您的理智对其进行测试: https://jsfiddle.net/f31psnhx/2/

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

这篇关于iOS tel:和mailto:链接仅适用于target ="_ blank"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！