Gibt es eine Möglichkeit, die standardmäßige blaue Hyperlinkfarbe von einer Telefonnummer zu entfernen, wenn diese auf einem iPhone angezeigt wird? Möchten Sie ein bestimmtes Mobile Safari-Tag oder CSS hinzufügen?

Ich habe dies nur für die Nummer eingerichtet:

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

Und es gibt keine Hyperlinks, aber das iPhone rendert diese Textnummer immer noch als Hyperlink. Ich habe dieses Rendering-Problem auf einigen meiner Websites, kann jedoch nicht erkennen, warum dies auftritt.

Ich habe diesen Beitrag gelesen:

Mobile HTML-Rendering-Nummern

Aber ist das die einzig mögliche Lösung?

Zwei Optionen…

1. Legen Sie das format-detectionMeta-Tag fest.

Fügen Sie Folgendes zu headIhrem htmlDokument hinzu, um alle automatischen Formatierungen für Telefonnummern zu entfernen :

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

Weitere Apple-spezifische Meta-Tag-Schlüssel anzeigen .

Hinweis: Wenn Sie auf der Seite Telefonnummern mit diesen Nummern haben, sollten Sie diese manuell als Links formatieren:

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

2. Sie können kein Meta-Tag festlegen? Willst du verwenden css?

Zwei cssOptionen:

Option 1 (besser für Webseiten)

Zielverknüpfungen mit hrefWerten, beginnend mit teldiesem CSS-Attributselektor:

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

Option 2 (besser für HTML-E-Mail-Vorlagen)

Alternativ können Sie, wenn Sie kein Meta-Tag festlegen können, z. B. in HTML-E-Mails, Telefonnummern in Link- / Anker-Tags ( <a href=""></a>) einbinden und ihre Stile mithilfe von CSS wie folgt ausrichten und die spezifischen Eigenschaften anpassen, die Sie zurücksetzen müssen ::

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;
}

Wenn Sie auf bestimmte Links abzielen möchten, verwenden Sie Klassen für Ihre Links und aktualisieren Sie dann den obigen CSS-Selektor auf a[x-apple-data-detectors].class-name.

Nur um auf einen früheren Vorschlag von David Thomas einzugehen:

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

Wenn Sie dies zu Ihrem CSS hinzufügen, bleibt die Funktionalität der Telefonnummer erhalten, die Unterstreichung wird jedoch entfernt und entspricht der Farbe, die Sie ursprünglich verwendet haben.

Seltsam, dass ich meine eigene Antwort posten kann, aber nicht auf die eines anderen antworten kann.

Wenn Sie die Funktion der Telefonnummer beibehalten möchten , aber nur die Unterstreichung zu Anzeigezwecken entfernen möchten , können Sie den Link wie folgt gestalten:

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

Ich habe keine Dokumentation zu sehen , dass eine Klasse schlägt die Telefonnummer Links angelegt wird, so dass Sie Klassen / IDs zu Links hinzufügen müssen Sie wollen einen anderen Stil haben.

Alternativ können Sie den Link folgendermaßen gestalten:

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

Was vom iPhone verstanden wird und von keinem anderen UA angewendet wird (soweit ich weiß, können Android / Blackberry usw. Benutzer / Entwickler Kommentare abgeben).

Wenn Nutzer diese Frage bei Google finden, müssen Sie die Telefonnummer lediglich als Link behandeln, da Apple sie automatisch als einen Link festlegt.

Ihr HTML

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

Ihre CSS

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

Da wir tel: links auf einer Site mit einem Telefonsymbol verwenden: bevor die meisten hier veröffentlichten Lösungen ein weiteres Problem verursachen.

Ich habe das Meta-Tag verwendet:

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

Dies kombiniert mit der Angabe von tel: links auf der gesamten Website, wo es verlinkt werden soll!

Die Verwendung von CSS ist wirklich keine Option, da relevante Tel-Links ausgeblendet werden.

Ein einfacher Trick hat bei mir funktioniert und ein verstecktes Objekt in der Mitte der Telefonnummer hinzugefügt.

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

Auf diese Weise können Sie die Farbe der Telefonnummer für IOS überschreiben.

Eine alte Frage, aber da keine der obigen Antworten gut für mich war, poste ich, wie ich sie gelöst habe

Ich habe eine Telefonnummer in einer Liste:

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

CSS:

.phone_menu{
  color:orange;
}

Aber auf dem iPad / iPhone war es schwarz, also habe ich dies dem CSS hinzugefügt:

.phone_menu a{
  color:orange;
}

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

Laut Beau Smith aus diesem Thema: Wie entferne ich das blaue Styling von Telefonnummern auf iPhone / iOS?

Sie sollten "tel:" im href-Attribut Ihres Links wie folgt anwenden:

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

Es werden alle zusätzlichen Stile und DOMs zur Telefonnummernzeichenfolge entfernt.

Ich bin dazwischen hin und her gegangen

1.

    <a href="tel:5551231234">

2.

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

Der Versuch, denselben Code für Desktop und iPhone zum Laufen zu bringen. Das Problem bestand darin, dass bei Verwendung der ersten Option und Klicken in einem Desktop-Browser eine Fehlermeldung angezeigt wird und bei Verwendung der zweiten Option die Tab-to-Call-Funktion auf dem iPhone iOS5 deaktiviert wird.

Also habe ich es versucht und es stellte sich heraus, dass das iPhone die Telefonnummer als eine spezielle Art von Link behandelt, der mit CSS als einer formatiert werden kann. Ich habe die Nummer in ein Adress-Tag eingeschlossen (es würde mit jedem anderen HTML-Tag funktionieren, versuchen Sie einfach, das <a>Tag zu vermeiden ) und es in CSS als gestylt

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

und es funktionierte - in einem Desktop-Browser wurde ein einfacher Text angezeigt und in einem Safari-Handy wurde ein Link mit dem Fenster "Anruf / Abbrechen" angezeigt, das auf der Registerkarte und ohne die standardmäßige blaue Farbe und Unterstreichung angezeigt wurde.

Seien Sie vorsichtig mit den CSS-Regeln, die auf die Nummer angewendet werden, insbesondere wenn Sie Polster / Rand verwenden.

Keine Notwendigkeit, die Formaterkennung mithilfe von zu entfernen <meta name="format-detection" content="telephone=no">. Versuchen Sie, die Telefonnummer in einem beliebigen Tag zu verwenden, anstatt das Tag zu verankern, und gestalten Sie es entsprechend, z.span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Dieses Metatag funktioniert im Standard-Safari-Browser auf iOS-Geräten und nur für Telefonnummern, die nicht in eine Telefonverbindung eingebunden sind

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

Die erste Zeile wird nicht als Link formatiert, wenn Sie das Metatag angeben, die zweite Zeile jedoch, weil sie in einen Telefonanker eingeschlossen ist.

Sie können auf das Metatag insgesamt verzichten und ein Mixin wie z

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

Um die beabsichtigte Gestaltung Ihrer Telefonnummern beizubehalten, müssen Sie sie jedoch in einen Telefonanker einwickeln.

Wenn Sie besonders vorsichtig sein und sich vor dem Ereignis einer Telefonnummer schützen möchten, die nicht ordnungsgemäß mit einem umschließenden Ankertag formatiert ist, können Sie das DOM durchforsten und mit diesem Skript anpassen. Passen Sie das Ersatzmuster wie gewünscht an.

$('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>'));

oder noch besser ohne 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>');

Wenn Sie nicht beabsichtigen, Telefonnummern auf Ihrer Seite zu haben, <meta name="format-detection" content="telephone=no"> funktioniert dies einwandfrei. Aber rhetorisch gesehen, was ist, wenn Sie eine Mischung aus Telefon- und Nicht-Telefonnummern verwenden möchten?

Angenommen, Sie codieren nur Zahlen fest in Ihr HTML, dann funktionieren die Hacks "Sachen in die Mitte Ihrer Ziffern einfügen". Für dynamische Seiten, z. B. die Verwendung von PHP zur Ausgabe numerischer Daten aus einer Abfrage, sind sie jedoch wenig bis gar nicht von Nutzen.

Als Beispiel habe ich eine Liste der Stadtbevölkerungen erstellt. Einige der Bevölkerungsgruppen waren groß genug, um Mobile Safari zu veranlassen, sie in Telefonnummernverbindungen umzuwandeln. Glücklicherweise musste ich nur PHP number_format()um die Array-Ausgabe verwenden, um "Tausende" Kommas einzufügen:

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

Diese Formatierung reichte aus, um Mobile Safari davon zu überzeugen, dass es einen etwas spezifischeren Zweck für die Nummer gab, sodass meine größeren Nummern nicht mehr standardmäßig in Telefonverbindungen umgewandelt wurden. Gleiches gilt für den Vorschlag von @davidcondrey zur Verwendung<a href="tel:18001234567">1-800-123-4567</a> , einen Zweck für die Nummer anzugeben.

Fazit ist, dass Safari Mobile anscheinend auf Semantik achtet. Da HTML5 auf semantischem Markup basiert und Suchmaschinen auf semantisches Markup setzen, beabsichtige ich, es so oft wie möglich zu verwenden.

Wenn Sie die Nummer in ein <Feldset> einfügen, kann iOS die Nummer aus irgendeinem Grund nicht in einen Link konvertieren. In einigen Fällen könnte dies die richtige Lösung sein. Ich befürworte keine pauschale Deaktivierung der Konvertierung in Links.

iOS macht Telefonnummern standardmäßig anklickbar (aus offensichtlichen Gründen). Dadurch wird natürlich ein zusätzliches Tag hinzugefügt, das Ihr Styling überschreibt, wenn Ihre Telefonnummer noch kein Link ist.

Versuchen Sie, dies zu Ihrem Stylesheet hinzuzufügen, um das Problem zu beheben: a[href^=tel] { color: inherit; text-decoration: none; }

Dadurch sollten Ihre Telefonnummern wie erwartet gestaltet bleiben, ohne dass zusätzliche Markups hinzugefügt werden müssen.

Versuchen Sie, das ASCII-Zeichen für den Bindestrich zwischen die Zifferntrennungen zu setzen.

davon: -

dazu: –

Beispiel: change 555-555-5555=>555–555–5555

Das hat es für mich getan:

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

Weitere Informationen finden Sie hier .

In Joomla arbeitet Yootheme für mich:

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

Dieses Attribut x-ms-format -erkennung = "none" behandelt das Format Telefon.

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>

Wenn Sie einfach vermeiden möchten, dass Telefonnummern überhaupt Links sind, verwenden Sie das Schriftart-Tag:

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