it-swarm.com.de

Wie entferne ich den blauen Stil von Telefonnummern auf dem iPhone/iOS?

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

Ich habe nur diese Nummer für die Nummer:

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

Es gibt keine Hyperlinks, aber das iPhone stellt diese Textnummer immer noch als Hyperlink dar. 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? 

181
Reno

Zwei Optionen…

1. Legen Sie das Metamark format-detection fest.

Um die automatische Formatierung für Telefonnummern zu entfernen, fügen Sie dies der head Ihres html-Dokuments hinzu:

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

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

Hinweis: Wenn auf der Seite Telefonnummern mit diesen Nummern vorhanden sind, sollten Sie sie manuell als Links formatieren:

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

2. Kann kein Meta-Tag setzen? Möchten Sie css verwenden?

Zwei css-Optionen:


Option 1 (besser für Webseiten)

Zielverknüpfungen mit href-Werten, die mit tel beginnen, mithilfe dieses css-Attributselektors:

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-Mail), die Telefonnummern in Link-/Anchor-Tags (<a href=""></a>) einschließen und dann ihre Stile mithilfe von css (ähnlich wie folgt) anpassen und die erforderlichen Eigenschaften anpassen zurücksetzen:

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 bestimmte Links als Ziel verwenden möchten, verwenden Sie Klassen für Ihre Links und aktualisieren Sie dann den CSS-Selektor oben auf a[x-Apple-data-detectors].class-name.

385
Beau Smith

Um nur 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 Unterstriche werden jedoch entfernt und die Farbe, die Sie ursprünglich verwendet haben, entfernt.

Seltsam, dass ich meine eigene Antwort posten kann, aber ich kann nicht auf jemand anderes antworten. 

159
Silverback

Wenn Sie die Funktion der Telefonnummer beibehalten möchten, die Unterzeile jedoch nur zu Anzeigezwecken entfernen, können Sie den Link wie einen anderen gestalten:

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

Ich habe keine Dokumentation gesehen, in der vorgeschlagen wird, dass eine Klasse auf die Telefonnummernlinks angewendet wird. Daher müssen Sie Klassen/IDs zu Links hinzufügen, die Sie want verwenden, um einen anderen Stil zu haben.

Alternativ können Sie den Link mit folgendem Stil gestalten:

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

Was von iPhone verstanden wird und nicht angewendet wird (soweit ich weiß, vielleicht Android, Blackberry, etc., können Benutzer/Entwickler von jedem anderen UA kommentieren).

28
David Thomas

Wenn die Benutzer diese Frage bei Google finden, müssen Sie die Telefonnummer nur als Link behandeln, da Apple sie automatisch als eine Verknüpfung aufstellt.

ihr HTML

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

deine css

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

Da wir tel: links auf einer Site mit einem Telefonsymbol verwenden: Bevor die meisten hier veröffentlichten Lösungen ein anderes Problem darstellen, führt dies zu einem Problem.

Ich habe das Meta-Tag verwendet:

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

Kombiniert mit der Angabe von tel: links site-wide, wo es verlinkt werden sollte!

Css ist wirklich keine Option, da relevante Tel-Links ausgeblendet werden.

9
Valross.nu

Eine alte Frage, aber da keine der obigen Antworten für mich gut 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 der CSS hinzugefügt:

.phone_menu a{
  color:orange;
}
5
Marko

Ein einfacher Trick funktionierte für mich, indem ein verstecktes Objekt in die Mitte der Telefonnummer eingefügt wurde.

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

Dies hilft Ihnen, die Rufnummernfarbe für IOS außer Kraft zu setzen.

5
Arkadas Kilic
a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
3
Ross

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

Sie sollten "tel:" im href-Attribut Ihres Links folgendermaßen anwenden:

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

Es entfernt alle zusätzlichen Formatvorlagen und das DOM aus der Rufnummer der Telefonnummer.

Sie müssen die Formaterkennung nicht mit <meta name="format-detection" content="telephone=no"> entfernen. Versuchen Sie, die Telefonnummer in einem beliebigen Tag zu verwenden, anstatt das Tag zu verankern, und formatieren Sie es entsprechend, z. B .: span { background:none !important; border:0; padding:0; }

2
Neetu

Ich bin hin und her gegangen 

1.

    <a href="tel:5551231234">

2.

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

Beim Versuch, denselben Code für Desktop und iPhone zu verwenden. Das Problem war, dass, wenn die erste Option verwendet wird und Sie von einem Desktop-Browser aus darauf klicken, eine Fehlermeldung angezeigt wird. Wenn die zweite Option verwendet wird, wird die Tab-to-Call-Funktion auf dem iPhone iOS5 deaktiviert.

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 ein Link formatiert werden kann. Ich habe die Nummer in ein Adress-Tag verpackt (es würde mit jedem anderen HTML-Tag funktionieren, versuchen Sie einfach, <a>-Tag zu vermeiden) und habe es in CSS als gestylt 

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

und es hat funktioniert - in einem Desktop-Browser wurde ein Nur-Text-Text angezeigt und in einem Safari-Handy als Link, wobei das Call/Cancel-Fenster auf der Registerkarte und ohne die standardmäßige blaue Farbe und Unterstreichung angezeigt wurde. 

Seien Sie vorsichtig mit den auf die Nummer angewendeten css-Regeln, besonders wenn Sie Auffüllen/Rand verwenden.

2
Bryana

<meta name="format-detection" content="telephone=no"> . Dieses Metatag funktioniert im Standardbrowser von Safari auf iOS-Geräten und funktioniert nur für Telefonnummern, die nicht in eine Telefonverbindung eingeschlossen 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, da sie in einen Telefonanker eingepackt ist.


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

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 sicherstellen, dass Sie sie in einen Telefonanker einwickeln.

Wenn Sie besonders vorsichtig sein und vor einer nicht ordnungsgemäß formatierten Telefonnummer mit einem Anker-Tag schützen möchten, können Sie das DOM durchdringen 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>');
1
davidcondrey

iOS macht Telefonnummern per Standard anklickbar (aus offensichtlichen Gründen). Dies fügt natürlich ein zusätzliches Tag hinzu, das Ihr Styling überschreibt, wenn Ihre Telefonnummer nicht bereits ein Link ist.

Um dies zu beheben, fügen Sie Folgendes Ihrem Stylesheet hinzu: a[href^=tel] { color: inherit; text-decoration: none; }

Das sollte Ihre Telefonnummern so halten, wie Sie es erwarten, ohne zusätzliche Markierungen hinzuzufügen.

1
subindas pm

Wenn Ihre Seite keine Telefonnummern enthalten soll, funktioniert <meta name="format-detection" content="telephone=no"> Einwandfrei. Aber was ist rhetorisch gesehen, wenn Sie beabsichtigen, eine Mischung aus Telefon- und Nichttelefonnummern zu verwenden?

Angenommen, Sie kodieren nur Zahlen fest in Ihren HTML-Code, dann funktionieren die Hacks "Zeugs in die Mitte Ihrer Ziffern einfügen". Für dynamische Seiten nützen sie jedoch wenig oder gar nichts, z. B. die Verwendung von PHP zur Ausgabe numerischer Daten aus einer Abfrage.

Als Beispiel habe ich eine Liste der Stadtbevölkerungen erstellt. Einige der Populationen waren groß genug, um Mobile Safari zu veranlassen, sie in Telefonnummern-Links 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 genügte, um Mobile Safari davon zu überzeugen, dass es einen etwas genaueren Zweck für die Nummer gab, sodass meine größeren Nummern nicht mehr standardmäßig mit Telefonverbindungen verknüpft wurden. Gleiches gilt für den Vorschlag von @davidcondrey, <a href="tel:18001234567">1-800-123-4567</a> Zu verwenden, um der Zahl einen Zweck zuzuweisen.

Das Fazit ist, dass Safari Mobile anscheinend der Semantik Aufmerksamkeit schenkt. Da HTML5 auf semantischem Markup basiert und Suchmaschinen sich auf semantisches Markup verlassen, werde ich es so oft wie möglich verwenden.

1
KiloVoltaire

Wenn Sie die Nummer in ein <Feldset> einfügen, wird iOS aus irgendeinem Grund die Umwandlung der Nummer in einen Link verhindern. In einigen Fällen könnte dies die richtige Lösung sein. Ich plädiere nicht für eine generelle Deaktivierung der Umwandlung in Links.

1
Oliver P

Das hat es für mich getan:

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

Weitere Infos finden Sie hier .

0

Dieses Attribut x-ms-format-detection = "none" behandelt das Formattelefon.

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>
0
Tabares

Setzen Sie das Zeichen ASCII für den Bindestrich zwischen den Zifferntrennungen.

davon: -

dazu: &ndash;

zB: 555-555-5555 ändern => 555&ndash;555&ndash;5555

0

In Joomla arbeitet Yootheme für mich:

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