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"を追加すると、デスクトップとアンドロイドの両方で空白のページが開いて、ユーザーエクスペリエンスが低下します。

誰もがすべての問題を解決するソリューションを見つけることができましたか？

私は最新のBootstrapフレームワークを使用しています。

誰かが助けてくれることを願っています。

Answer 1

これはまったく答えと考えることもできますが、少し遅れた回答ですが、最近私はこのバリエーションに遭遇していくつかの進歩を遂げました。

基本的には、iOS/Safari（最近のバージョン）で一貫して動作するように、mailtoのリンクにはtarget="_blank"が必要です。

Androidについてはどうですか？いくつかのテストの後、あなたはrel="noopener"を持っていない限り、Android/Chrome用にtarget="_blank"を持つことができます。なぜ？！知るか？誰もこれを文書化することを悩ました、または私のグーグル・グーグル・パワーが私を失敗させた。

あなた自身のサニティのためにテストしてください： https://jsfiddle.net/f31psnhx/2/