Deaktivieren Sie Rufnummer-Erkennung auf dem iPad-desktop-web-links?

Ich bin der Entwicklung einer web-Anwendung, die gestartet werden von einem desktop-Symbol auf dem iPad als Vollbild-Anwendung. Die Apple-Dokumentation auf dem Telefon-links empfiehlt die Verwendung dieses meta-tag:

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

Jedoch scheint dies nicht zu funktionieren. Gibt es einen anderen HTML - /CSS - /JavaScript-Mechanismus, um dieses Verhalten Steuern?

Die zufällige Injektion von Anker-tags verursacht mir eine Menge CSS-Fehler.

Abhilfe

Einen hack den ich gefunden habe, arbeiten zu injizieren spezielle space-Zeichen, aber der Gedanke, verwandelt alle meine Daten auf Ausgabe nicht füllen Sie mich mit Freude. Solche Zeichen bringen Ihre eigenen Probleme auf den Tisch. Dies wird weiter kompliziert durch die AJAX-und JavaScript-Transformationen.

Reproduktion

Schritte zum reproduzieren:

  1. Öffnen Sie die Seite auf dem iPad Safari
  2. Verwenden Sie die Hinzufügen zum Home-Bildschirm Lesezeichen-Funktion
  3. Starten Sie die Home-Bildschirm Symbol

Beispiel-Seite:

<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name = "format-detection" content = "telephone=no">
<title>Telephone detect</title>
</head>
<body>
expected:
<a href="tel:1555555">1555555</a>
<br />
bad: 1555555
<br />
bad: &#x31;&#x35;&#x35;&#x35;&#x35;&#x35;&#x35;
<br />
inconvenient: 1&#xFEFF;555555
</body>
</html>

Hinweise

Diese Frage scheint verwandt zu sein, aber es fehlt detail und ich bin mir nicht sicher, ob das Verhalten identisch ist auf dem iPhone. Dies ist eine web-Anwendung und hat keine native Komponente. iPad version 3.2.2.

Hinweis: es ist schon eine Reihe von Jahren, seit ich gepostet dieser Frage und nicht in der Lage bin, zu kommentieren, ob das Problem vorhanden ist, die in neueren Versionen der software, noch kann ich überprüfen, vorgeschlagenen Lösungen.

InformationsquelleAutor McDowell | 2010-11-24

  1. 7

    Den meta-tag funktioniert bei mir in asp.net. Meine Vermutung ist, dass es nicht funktioniert für die OP da der HTML-Code ist nicht wohlgeformt. Nicht-IE -, Mozilla-Browser haben Probleme mit fehlerhaften XML/Html. Ändern

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

    zu

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

    Das markup von HTML 5, wo die / hat keine Auswirkung auf leere Elemente wie meta. Ich arbeite nicht mehr in diesem Bereich und don ' T haben ein iPad zum testen auf, so kann nicht überprüfen, das Verhalten gegen die spec.

    InformationsquelleAutor

  2. 3

    Setzen diese nach tel-Verbindung zu laden

    if (navigator.userAgent.match(/(iPhone|Android|BlackBerry)/)) {
//this is the phone

} else if (navigator.userAgent.match(/(iPod|iPad)/)) {
    $('a[href^=tel]').click(function(e){
       e.preventDefault();
    });
} else {
 //this is the browser

    $('a[href^=tel]').click(function(e){
        e.preventDefault();
    });
}
    Warum ist der zweite if-block notwendig? Ist es nicht das gleiche tun wie den else-block?

    InformationsquelleAutor

  3. 2

    Den meta-tag funktioniert:

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

    Ist es der Safari-browser zeigt nicht die aktualisierte Seite richtig. Machen einige andere text wechseln Sie auf die Seite und aktualisieren und die änderungen werden angezeigt. Nur das hinzufügen der meta-tag, wird immer noch die Seite mit der Nummer interpretiert, als eine Telefon-Nummer, wenn Sie schon eingesehen das es so ist.

    FYI: Einrücken, code 4 Leerzeichen für die Formatierung.
    TY, neu auf.

    InformationsquelleAutor

  4. 1

    ok, es behoben.. fügen Sie ein <a href link> und style es mit keine text-Dekoration... ich war mit dem asp:hyperlink-Steuerelement in asp.net und es funktionierte auf 3.2, also nicht sicher, warum Sie angehalten, 4.2, aber mit einem standard-ein link funktioniert.

    Ich Schätze die Anstrengungen und diese Lösung kann für einige, aber es bringt andere Probleme, die überwunden werden müssen, (wie Sie die Dinge in die Tabstopps; Barrierefreiheit - diese Sachen noch in anderen Browsern funktionieren).

    InformationsquelleAutor

Schreibe einen Kommentar