iPhoneで表示したときに電話番号からデフォルトの青いハイパーリンクの色を削除する方法はありますか？追加する特定のMobile SafariタグまたはCSSが好きですか？

私は数のためにこれを適切に持っています：

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

ハイパーリンクはありませんが、iPhoneはこのテキスト番号をハイパーリンクとしてレンダリングします。一部のウェブサイトでこのレンダリングの問題が発生していますが、これが発生している理由がわかりません。

私はこの記事を読みました：

モバイルHTMLレンダリング数

しかし、それが可能な唯一の解決策ですか？

2つのオプション…

1. format-detectionメタタグを設定します。

電話番号の自動フォーマットをすべて削除するにはhead、これをhtmlドキュメントのに追加します。

<meta name="format-detection" content="telephone=no">

Apple固有のメタタグキーをさらに表示します。

注：これらの番号のあるページに電話番号がある場合は、手動でリンクとしてフォーマットする必要があります。

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2.メタタグを設定できませんか？使いたいcssですか？

2つのcssオプション：

オプション1（Webページに適しています）

このcss属性セレクターを使用してhref始まる値を持つターゲットリンクtel：

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

オプション2（html電子メールテンプレートに適しています）

または、HTMLメールなどのメタタグを設定できない場合は、電話番号をリンク/アンカータグ（<a href=""></a>）で囲み、次のようなcssを使用してスタイルをターゲティングし、リセットする必要がある特定のプロパティを調整します：

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

特定のリンクをターゲットにする場合は、リンクでクラスを使用してから、上記のcssセレクターをに更新しa[x-apple-data-detectors].class-nameます。

David Thomasによる以前の提案について詳しく説明します。

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

これをCSSに追加すると、電話番号の機能は残りますが、下線が取り除かれ、元々使用していた色と一致します。

不思議なことに、自分の回答を投稿することはできますが、他の誰かの回答には応答できません。

電話番号の機能を保持したいが、表示のために下線を削除するだけの場合は、リンクを他のスタイルに変更できます。

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

クラスが電話番号リンクに適用されていることを示唆するドキュメントは見たことがありません。そのため、別のスタイルにしたいリンクにクラス/ IDを追加する必要があります。

または、次の方法でリンクのスタイルを設定できます。

a[href^=tel] { /* css */ }

これはiPhoneによって理解され、他のUAには適用されません（私の知る限り、おそらくAndroid、Blackberryなどのユーザー/開発者がコメントできます）。

Googleでこの質問を見つけた場合、Appleが自動的に電話番号を設定するため、電話番号をリンクとして扱うだけです。

あなたのHTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

あなたのCSS

#phone-text a{color:#fff; text-decoration:none;}

ここでは、電話アイコンが：beforeになっているサイトでtel：リンクを使用しているため、ここに掲載されているほとんどのソリューションでは別の問題が発生します。

私はメタタグを使用しました：

<meta name="format-detection" content="telephone=no">

これは、tel：を指定することと組み合わせて、リンクすべきサイト全体にリンクします！

cssを使用すると、関連するtel-linksが非表示になるため、実際にはオプションではありません。

電話番号の真ん中に隠しオブジェクトを追加して、単純なトリックがうまくいきました。

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

これは、IOSの電話番号の色を上書きするのに役立ちます。

古い質問ですが、上記の答えはどれも私にとっては良いものではなかったので、私はそれをどのように解決したかを投稿します

リストに電話番号があります。

<li class="phone_menu">+555 5 555 55 55</li>

css：

.phone_menu{
  color:orange;
}

しかし、iPad / iPhoneでは黒いので、これをCSSに追加しただけです。

.phone_menu a{
  color:orange;
}

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

この主題のボー・スミスによると： iPhone / iOSで電話番号の青いスタイルを削除するにはどうすればよいですか？

次のように、リンクのhref属性に「tel：」を適用する必要があります。

<a href="tel:5551231234">555 123-1234</a>

電話番号の文字列に追加されたスタイルとDOMを削除します。

私は行ったり来たりしてきました

1。

    <a href="tel:5551231234">

2。

    <meta name="format-detection" content="telephone=no">

デスクトップとiPhoneで同じコードを機能させるようにします。問題は、最初のオプションを使用してデスクトップブラウザーからそれをクリックするとエラーメッセージが表示され、2番目のオプションを使用するとiPhone iOS5のタブ呼び出し機能が無効になることでした。

だから私は試してみましたが、iPhoneは電話番号をCSSでフォーマットできる特別なタイプのリンクとして扱うことがわかりました。数値をアドレスタグで囲み（他のHTMLタグでも機能するので、<a>タグを避けてみてください）、CSSで次のようにスタイル設定しました。

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

デスクトップブラウザーではプレーンテキストが表示され、Safariモバイルではリンクとして表示され、タブにポップアップする[呼び出し/キャンセル]ウィンドウがあり、デフォルトの青色と下線はありませんでした。

特にパディング/マージンを使用する場合は、数値に適用されるCSSルールに注意してください。

を使用してフォーマット検出を削除する必要はありません<meta name="format-detection" content="telephone=no">。タグをアンカーするのではなく、任意のタグで電話番号を使用して、それに応じてスタイルを設定してください。例：span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">。このメタタグは、iOSデバイスのデフォルトのSafariブラウザで機能し、電話リンクにラップされていない電話番号でのみ機能します。

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

メタタグを指定した場合、1行目はリンクとしてフォーマットされませんが、2行目は電話のアンカーで囲まれているため、リンクとしてフォーマットされます。

メタタグを完全に無視して、次のようなミックスインを使用できます。

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

あなたの電話番号の意図されたスタイルを維持するために、しかしあなたはそれらを電話アンカーに包むことを確実にしなければなりません。

特別な注意を払い、ラッピングアンカータグで正しくフォーマットされていない電話番号のイベントから保護する場合は、DOMをドリルスルーして、このスクリプトで調整できます。必要に応じて、置換パターンを調整します。

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

またはjQueryなしでさらに良い

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

ページに電話番号を表示するつもりがない場合は、問題なく機能します <meta name="format-detection" content="telephone=no"> 。しかし、修辞的に言えば、電話番号と非電話番号を組み合わせて使用​​する場合はどうでしょうか。

HTMLに数値をハードコーディングしているだけだとすると、「数字の途中に文字を挿入する」ハックが機能します。しかし、PHPを使用してクエリから数値データを出力するなど、動的ページにはほとんどまたはまったく役に立ちません。

例として、私は都市の人口のリストを生成していました。一部の人口は、Mobile Safariがそれらを電話番号リンクに変えるのに十分な大きさでした。幸い、私がしなければならなかったのはnumber_format()、配列出力の周りにPHPを使用して「数千」のコンマを挿入することだけでした。

<?php echo number_format($row["population"]) ?>

このフォーマット設定は、モバイルSafariに、番号の目的がいくらか特定されていることを納得させるのに十分だったため、私の大きな番号を電話リンクにデフォルト設定しなくなりました。同じことは、@ davidcondreyが<a href="tel:18001234567">1-800-123-4567</a>番号に目的を指定するために使用するという提案にも当てはまります。

結論として、Safari Mobileは明らかにセマンティクスに注意を払っています。HTML5はセマンティックマークアップを中心に構築されており、検索エンジンはセマンティックマークアップに依存しているので、できる限り使用するつもりです。

数値を<fieldset>に入れると、iOSが何らかの理由で数値をリンクに変換できなくなります。これが正しい解決策になる場合もあります。リンクへの変換を全面的に無効にすることは推奨しません。

iOSでは、電話番号がデフォルトでクリック可能になっています（明らかな理由があります）。もちろん、それはあなたの電話番号がまだリンクでない場合にあなたのスタイリングを上書きする追加のタグを追加します。

修正するには、これをスタイルシートに追加してみてください： a[href^=tel] { color: inherit; text-decoration: none; }

これにより、余分なマークアップを追加せずに、電話番号のスタイルを期待どおりに保つことができます。

桁区切りの間にダッシュのASCII文字を入れてみてください。

これから： -

これに： –

例：変更555-555-5555=>555–555–5555

これは私のためにそれをしました：

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

詳細については、こちらをご覧ください。

Joomla Yoothemeでは私のために働きます：

a:not([class]) {
    color: #fff !important;
}

このx-ms-format-detection = "none"属性は、電話の形式を処理します。

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>+44 (0)20 7194 8000</strong></p>

電話番号をリンクにしないようにするだけの場合は、fontタグを使用してみてください。

<p>800<font>-</font>555<font>-<font>1212</p>