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

Safari auf dem iPhone erstellt automatisch Links für Ziffernfolgen, die zu den Telefonnummern angezeigt werden. Ich schreibe eine Webseite mit einer IP-Adresse und Safari verwandelt diese in einen Link mit einer Telefonnummer. Ist es möglich, dieses Verhalten für eine ganze Seite oder ein Element auf einer Seite zu deaktivieren?

Dies scheint laut der Safari-HTML-Referenz das Richtige zu sein :

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

Wenn Sie dies deaktivieren, aber dennoch Telefonverbindungen wünschen, können Sie weiterhin das URI-Schema "tel" verwenden.

Hier ist die entsprechende Seite in der Apple Developer Library.

Um das Erscheinungsbild der Telefonanalyse für bestimmte Elemente zu deaktivieren, scheint dieses 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 benutze einen Schreiner mit der Breite Null ‍

Tragen Sie das einfach irgendwo in die Telefonnummer ein und es funktioniert für mich. Getestet in BrowserStack (und Litmus für E-Mails).

Ich hatte das gleiche Problem. Ich habe in 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">

Lösung für Webview!

Für 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 Sie die Telefonerkennung in PhoneGap-iOS .

Um die Erkennung von Telefonnummern auf einem Teil einer Seite zu deaktivieren, schließen Sie den betroffenen Text mit href = "#" in ein Ankertag ein. Wenn Sie dies tun, sollten Mobile Safari und UIWebView dies in Ruhe lassen.

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

Ich glaube, ich habe eine Lösung gefunden: Setzen Sie die Zahl in ein <label>Element. Ich habe keine anderen Tags ausprobiert, aber <div>auf dem Startbildschirm aktiv gelassen, auch mit dem telephone=noAttribut.

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

Sie können das <a>Etikett auch javascript: void(0)als hrefWert verwenden.

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

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

Leider auch nicht ...

 <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ügen Sie eine bedeutungslose Spanne ein: z. 555.5<span>5</span>5.5555

Abhängig von der verwendeten Schriftart sind die ersten beiden kaum wahrnehmbar. Letzteres beinhaltet offensichtlich überflüssigen Code, ist aber für den Benutzer unsichtbar.

Kludgy hackt mit Sicherheit und ist 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.

Ich hatte eine ABN (Australian Business Number), die iPad Safari unbedingt in eine Telefonnummer verwandeln wollte. 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).

Meine Erfahrung ist die gleiche wie bei einigen anderen. Das Meta-Tag ...

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

... funktioniert, wenn die Website in Mobile Safari ausgeführt wird (dh mit Chrome), funktioniert jedoch nicht mehr, wenn sie als Webanwendung ausgeführt wird (dh 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">

Es ist weniger als ideal, da iOS trotz der Einstellung "Keine" einen grauen Balken mit mehreren Pixeln über dem Feld darstellt. Aber es ist besser, als die Nummer als Link zu sehen.

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 einen Link machen.

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

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

Wenn Sie auf E-Mails abzielen, finden Sie hier eine weitere hässliche, aber funktionierende Lösung für Sie:

Beispiel für HTML, das Sie nicht verknüpfen oder automatisch formatieren möchten:

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 Kombinationen aus iPad / iPhone-Hochformat / Querformat

Sie können versuchen, sie als HTML-Entitäten zu codieren:

0 = 0
9 = 9

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

Ein Trick, den ich verwende und der nicht nur für Mobile Safari funktioniert, ist die Verwendung von HTML-Escape-Codes und eines kleinen Aufschlags 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

Auch ich habe dieses Problem: Safari und andere mobile Browser wandeln die Umsatzsteuer-Identifikationsnummer in Telefonnummern um. Ich möchte also eine saubere Methode, um dies bei einem einzelnen Element zu vermeiden, nicht bei der gesamten Seite (oder Site).
Ich teile eine mögliche Lösung, die ich gefunden habe. Sie ist suboptimal, aber dennoch ziemlich praktikabel: Ich habe in die Zahl, die ich nicht als tel:Link verwenden möchte , die ⁠HTML-Entität eingefügt, bei der es sich um das unsichtbare Word-Joiner-Zeichen handelt . Ich habe versucht, semantischer zu bleiben (zumindest eine Art), indem ich dieses Zeichen an einer bestimmten Stelle platziert habe, z. B. für die Umsatzsteuer-Identifikationsnummer, die ich je nach Format zwischen die verschiedenen Zifferngruppen eingefügt habe, also für eine italienische Umsatzsteuer- ID I. schrieb: 0613605⁠048⁠8was in 0613605⁠048⁠8 rendert und es nicht in eine Telefonnummer umgewandelt wird.

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

Ich war eine Weile wirklich verwirrt, habe es aber endlich herausgefunden. 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 <Feldsatz> befinden. Offensichtlich nicht die richtige Lösung für die meisten Umstände, aber in einigen Fällen wird es die richtige sein.

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, wie es Ihrem Text entspricht. Durch die Textdekoration wird die Unterstreichung entfernt. Zeigerereignisse verhindern, dass sie wie ein Link in einem Browser angezeigt werden (der Zeiger ändert sich nicht in eine Hand.)

Dies ist perfekt für HTML-E-Mails auf iOS und 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, der Link aber weiterhin funktioniert, fügen Sie ihn einfach in Ihr CSS ein ...

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

Teilen Sie die Nummer in separate Textblöcke auf

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

Eine andere Lösung wäre die Verwendung eines Abbilds der IP-Nummer