iOS の電話番号から青いハイパーリンクのスタイルを削除するにはどうすればよいですか?

iOS での青色の数字スタイルの削除: 総合ガイド

モバイル ブラウザの領域では、iPhone の Mobile Safari は青色のハイパーリンク スタイルを自動的に適用します。電話番号。これは、テキスト内に数字が表示され、クリック可能なリンクとして表示される場合に煩わしい場合があります。疑問が生じます: この望ましくないスタイルをどのように削除できるでしょうか?

1. Format-Detection メタ タグによる自動フォーマットの無効化

青色のハイパーリンク スタイルを含むすべての自動フォーマットを効果的に防止するには、HTML ドキュメントの head 要素内に次のメタ タグを実装します。

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

ページ上にクリック可能にする電話番号がある場合は、次のコードを使用して手動でフォーマットする必要があることに注意してください:

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

2 。 CSS によるスタイルの制御

メタ タグの設定が不可能な場合は、CSS を使用してデフォルトのスタイルをオーバーライドできます。

オプション 1: 属性セレクターの使用

この CSS 属性セレクターは、「tel」で始まる href 値を持つリンクをターゲットにします:

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
  /* Additional CSS properties can be added here */
}

オプション 2: Apple 固有のデータ属性をターゲットにします

HTML メール テンプレートなど、メタ タグの設定がオプションではない場合は、電話番号をアンカー タグで囲み、次の 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 セレクターを更新します。

以上がiOS の電話番号から青いハイパーリンクのスタイルを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。