iPhone で電話番号がハイパーリンクになるのを防ぐには?

iPhone/iOS で電話番号がハイパーリンクとして表示されないようにする方法

iPhone で電話番号を表示すると、青いハイパーリンクのスタイルが自動的に適用されることがよくあります。実際のハイパーリンクがない場合でも。この動作は少し気が散り、Web サイトの外観を妨げる可能性があります。

解決策 1: フォーマット検出メタ タグを使用する

自動電話番号の書式設定を行うには、次のメタ タグを HTML ドキュメントの先頭に追加できます。

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

このメタ タグは、電話番号の自動書式設定を無視するようにブラウザに指示します。ただし、クリック可能な番号が必要な場合は、電話番号をハイパーリンクとして手動で書式設定する必要があることに注意することが重要です。

解決策 2: CSS を使用する

オプション 1 (Web ページの場合)

メタ タグを使用できない場合は、CSS を使用して、tel:

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
  /* Additional CSS properties as needed */
}

で始まる href 値を持つリンクをターゲットにすることができます。この CSS 属性セレクターは、電話番号を参照するすべてのハイパーリンクをターゲットにし、デフォルトの青色のスタイルを削除します。

オプション 2 (HTML 電子メール テンプレートの場合)

別の CSS オプション。特に作業する場合に便利です。 HTML 電子メール テンプレートには、電話番号をアンカー タグで囲むことが含まれます:

<a href="" x-apple-data-detectors>+44 (0)20 7194 8000</a>

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  /* Other important CSS properties */
}

このメソッドは、特定の属性 (x-apple-data-detectors) に依存して電話番号をターゲットにし、そのスタイルをリセットします。必要に応じて、クラスを特定のリンクに割り当て、それに応じて CSS セレクターを更新できます。

以上がiPhone で電話番号がハイパーリンクになるのを防ぐには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。