Wie deaktiviere ich die Verknüpfung von Telefonnummern in Mobile Safari?

Um die Darstellung der Telefonanalyse für bestimmte Elemente zu deaktivieren, scheint diese CSS den Trick zu tun:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

Die erste Regel deaktiviert den Klick, die zweite kümmert sich um das Styling.

Ich hatte das gleiche Problem. Ich habe auf der UIWebView eine Eigenschaft gefunden, mit der Sie die Datendetektoren ausschalten können.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Fügen Sie dies hinzu, ich denke, es ist das, wonach Sie suchen:

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

Ich verwende einen Schreiner mit der Breite Null ‍

Gib das einfach irgendwo in die Telefonnummer ein und es funktioniert bei mir. Getestet in BrowserStack (und Litmus für E-Mails).

Lösung für Webview!

Bei PhoneGap-iPhone-/PhoneGap-iOS-Anwendungen können Sie die Erkennung von Telefonnummern deaktivieren, indem Sie dem Anwendungsdelegierten Ihres Projekts Folgendes hinzufügen:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

quelle: Deaktivieren der Telefonerkennung in PhoneGap-iOS .

Um die Erkennung von Telefonnummern für einen Teil einer Seite zu deaktivieren, setzen Sie den betroffenen Text in ein Ankertag mit href = "#". Wenn Sie dies tun, sollten Mobile Safari und UIWebView es in Ruhe lassen.

<a href="#"> 1234567 </a>

Denke, ich habe eine Lösung gefunden: Setze die Zahl in ein <label> Element. Habe noch keine anderen Tags ausprobiert, aber <div> ließ es auf dem Startbildschirm aktiv, auch wenn telephone=no Attribut.

Aus früheren Kommentaren geht hervor, dass das Meta-Tag funktioniert hat, aber aus irgendeinem Grund unter den neueren Versionen von iOS, zumindest unter bestimmten Bedingungen, nicht funktioniert hat. Ich lasse 4.0.1 laufen.

Sie können auch die Beschriftung <a> Mit javascript: void(0) als href Wert verwenden.

Beispiel wie folgt:
<a href="javascript: void(0)">+44 456 77 89 87</a>

Ich hatte eine ABN (Australian Business Number), auf der iPad Safari bestand, um eine Telefonnummer zu verknüpfen. Keiner der Vorschläge half. Meine Lösung bestand darin, IMG-Tags zwischen die Zahlen zu setzen.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

Die Klasse existiert nur, um zu dokumentieren, wofür die img-Tags bestimmt sind.

Funktioniert auf iPad 1 (4.3.1) und iPad 2 (4.3.3).

Ich hatte das gleiche Problem, aber auf einer iPad-Web-App.

Leider weder ...

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

noch ...

0 = 0
9 = 9

... hat funktioniert.

Aber hier sind drei hässliche Hacks:

• ersetzen der Zahl "0" durch den Buchstaben "O"
• ersetzen der Zahl "1" durch den Buchstaben "l"
• füge eine bedeutungslose Spanne ein: z.B. 555.5<span>5</span>5.5555

Je nach verwendeter Schriftart fallen die ersten beiden kaum auf. Letzteres beinhaltet offensichtlich überflüssigen Code, ist jedoch für den Benutzer unsichtbar.

Kludgy-Hacks sind sicher und wahrscheinlich nicht realisierbar, wenn Sie Ihren Code dynamisch aus Daten generieren oder wenn Sie Ihre Daten nicht auf diese Weise verschmutzen können.

Aber zur Not ausreichend.

Meine Erfahrung ist die gleiche wie einige andere erwähnt. Das Meta-Tag ...

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

... funktioniert, wenn die Website in Mobile Safari ausgeführt wird (d. h. mit Chrome), funktioniert jedoch nicht mehr, wenn sie als Webanwendung ausgeführt wird (d. h. auf dem Startbildschirm gespeichert und ohne Chrome ausgeführt wird).

Meine weniger als ideale Lösung besteht darin, die Werte in Eingabefelder einzufügen ...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

Dies ist nicht ideal, da iOS trotz des auf "Keine" gesetzten Rahmens einen grauen Balken mit mehreren Pixeln über dem Feld darstellt. Aber es ist besser, als die Nummer als Verknüpfung zu sehen.

<meta name = "format-detection" content = "telephone=no"> funktioniert nicht für E-Mails: Wenn der HTML-Code, den Sie vorbereiten, für eine E-Mail ist, wird der Metatag ignoriert.

Wenn es sich bei dem, was Sie anvisieren, um E-Mails handelt, finden Sie hier eine weitere hässliche, aber funktionierende Lösung:

Beispiel für HTML, das nicht verlinkt oder automatisch formatiert werden soll:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

Und das CSS, das die Magie möglich macht:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

Der Nachteil: Möglicherweise benötigen Sie eine Medienabfrage für jede der ipad/iphone Hoch-/Querformatkombinationen

Ich habe dies selbst getestet und festgestellt, dass es funktioniert, obwohl es sicherlich keine elegante Lösung ist. Durch das Einfügen eines leeren Bereichs in die Telefonnummer wird verhindert, dass die Datendetektoren daraus eine Verknüpfung erstellen.

(604) 555<span></span> -4321

Ein Trick, den ich bei mehr als nur Mobile Safari verwende, ist die Verwendung von HTML-Escape-Codes und einer kleinen Markierung in der Telefonnummer. Dies macht es für den Browser schwieriger, eine Telefonnummer zu "identifizieren", d.h.

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

Gleiches Problem in der Sencha Touch-App mit Meta-Tag (<meta name="format-detection" content="telephone=no">) in index.html der App.

Sie könnten versuchen, sie als HTML-Entitäten zu kodieren:

0 = 0
9 = 9

Ich habe auch dieses Problem: Safari und andere mobile Browser wandeln die Mehrwertsteuer-IDs in Telefonnummern um. Ich möchte also eine saubere Methode, um dies auf einem einzelnen Element zu vermeiden, nicht auf der gesamten Seite (oder Site).
Ich teile eine mögliche Lösung, die ich gefunden habe, sie ist suboptimal, aber immer noch ziemlich realisierbar: Ich setze in die Zahl, die ich nicht werden möchte, ein tel: Link, der ⁠ HTML-Entität, die das nsichtbare Word-Joiner-Zeichen ist. Ich habe versucht, semantischer zu bleiben (zumindest in gewisser Weise), indem ich diesen Buchstaben an eine bedeutungsvolle Stelle gesetzt habe, z. für die Umsatzsteuer-Identifikationsnummer habe ich mich entschieden, sie zwischen die verschiedenen Zifferngruppen zu setzen, entsprechend seinem Format also für eine italienische Umsatzsteuer schrieb ich: 0613605⁠048⁠8, das in 0613605⁠048⁠8 gerendert wird und nicht in eine Telefonnummer umgewandelt wird.

Ich war eine Weile wirklich verwirrt, fand es aber schließlich heraus. Wir haben unsere Website aktualisiert und einige Nummern in einen Link konvertiert, andere nicht. Es stellt sich heraus, dass Zahlen nicht in einen Link konvertiert werden, wenn sie sich in einem <fieldset> befinden. Offensichtlich nicht die richtige Lösung für die meisten Umstände, aber in einigen Fällen wird es die richtige sein.

Eine andere Möglichkeit besteht darin, die Bindestriche in Ihrer Telefonnummer durch das Zeichen ‑ Zu ersetzen (U + 2011 'Unicode Non-Breaking Bindestrich').

Teilen Sie die Zahl in einzelne Textblöcke auf

301 <div style="display:inline-block">441</div> 3909

Diese Antwort übertrifft alles ab dem 13.06.2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

Ändern Sie die Farbe so, dass sie zu Ihrem Text passt. Die Textdekoration entfernt die Unterstreichung. Zeigerereignisse verhindern, dass sie wie ein Link in einem Browser angezeigt wird. (Der Zeiger ändert sich nicht in eine Hand.)

Dies ist perfekt für HTML-E-Mails auf iOS und im Browser.

Warum sollten Sie die Verknüpfung entfernen wollen, es macht es sehr benutzerfreundlich, die Option zu haben.

Wenn Sie einfach die automatische Bearbeitung entfernen möchten, den Link aber weiterhin verwenden möchten, fügen Sie diesen einfach in Ihr CSS ein ...

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