Wie kann ich verhindern, dass Mobile Safari Telefonnummern automatisch formatiert?

Telefonnummern in Mobile Safari gestalten

Wenn Sie mit Mobile Safari eine Telefonnummer auf einem iPhone anzeigen, ist es frustrierend, auf den standardmäßigen blauen Hyperlink zu stoßen Styling. Dies kann zu unerwünschten Formatierungsinkonsistenzen führen und das Benutzererlebnis beeinträchtigen. Wenn dieses Problem auf Ihrer Website auftritt, stehen mehrere Lösungen zur Verfügung, um den blauen Stil zu entfernen.

1. Deaktivieren Sie die automatische Formatierung mithilfe des Meta-Tags:

Fügen Sie dieses Meta-Tag zum Kopf Ihres HTML-Dokuments hinzu:

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

Dieses Meta-Tag weist Mobile Safari an, Telefonnummern nicht automatisch zu formatieren , sodass Sie deren Stil manuell steuern können.

Hinweis: Wenn Sie Telefonnummern auf der Seite haben, die anklickbar sein sollen, müssen Sie dies tun Formatieren Sie sie manuell als Links mit dem Tag „a“:

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

2. Entfernen Sie das Styling mithilfe von CSS:

Option 1:

Zielen Sie auf Links mit href-Werten ab, die mit „tel“ beginnen:

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

Option 2:

Für Situationen, in denen Sie kein Meta-Tag verwenden können, z. B. in HTML E-Mail-Vorlagen, verpacken Sie Telefonnummern in Anker-Tags und zielen Sie mit CSS auf deren Stile ab:

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

Sie können auch Klassennamen in Ihren Links verwenden, um auf bestimmte Elemente abzuzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Mobile Safari Telefonnummern automatisch formatiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!