webentwicklung-frage-antwort-db.com.de

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

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

344
benzado

Dies scheint die richtige Vorgehensweise zu sein, wie in der Safari HTML Reference :

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

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

Hier ist das relevante Seite in der Apple Developer Library.

679
lewinski

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.

36
Florian Grell

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;
33
catshow

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

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

Ich verwende einen Schreiner mit der Breite Null &zwj;

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

28
stickyuser

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 .

10
user788055

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>
7
yodaisgreen

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.

6
BobFromBris

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>

6
diazwatson

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).

4
mhenry1384

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

Leider weder ...

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

noch ...

&#48; = 0
&#57; = 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.

4
mattstuehler

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.

4
Alan M.

<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

2
cabrera

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
2
Jay

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
1
Phil LaNasa

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

1
someone else

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

&#48; = 0
&#57; = 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 &#8288; 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&#8288;048&#8288;8, das in 0613605⁠048⁠8 gerendert wird und nicht in eine Telefonnummer umgewandelt wird.

1
kaosmos

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.

1
Oliver P

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

1
Daniel

Teilen Sie die Zahl in einzelne Textblöcke auf

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

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.

0
Vincent Tobiaz

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