IPhone und Zahlenketten

[Uwe367]

Hallo allerseits.
Heute stellte ich eine neue Website online und der Kunde erklärte mir daß auf seiner neuen Seite keine Telefonnummer angezeigt würde. Das ganze sah im Screenshot so aus daß zwar Telefon: da stand, aber eben keine Nummer dahinter und bei anderen Zahkenketten, wie z.B. Steuernummer, das gleiche.
Also suchte ich ein wenig im Netz und fand heraus daß das IPhone solche Zahlenketten automatisch in Telefonlinks umwandelt und komischerweise werden diese dann scheinbar unsichtbar.
Ich habe mir nun auf die Schnelle damit weiter geholfen indem ich folgenden Code im HEAD der Seite einfügte:

Code: Select all

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

Klappt zwar nun, aber kann doch nocht wirklich Sinn und Zweck der Sache sein.

Mir ist klar daß das kein phpwcms spezifisches Problem ist, aber wie kann ich dem ganzen eleganter entgegen wirken?
Es scheint sich hierbei um ein Problem zu handeln welches nur bei dem IPhone auftritt.
Gibts dafür eine bessere, elegantere Lösung?

Gruß Uwe

[Oliver Georgi]

Ich kann das nicht nachvollziehen, also das Ausblenden. Zwar werden Umsatzsteuer etc. markiert, aber bleiben sichtbar.

Ist also die Frage:

• Welches iOS
• Welcher Browser
• Eventuell Script/App drauf, welche(s) hier etwas abfängt.

[nameless1]

glaub nicht das ausgeblendet sondern zu links verwandelt die dann entsprechend der css-formtierung dargestellt werden. css sagt sicherlich weißer adler auf weißem grund o.ä.

[Oliver Georgi]

glaub nicht das ausgeblendet sondern zu links verwandelt die dann entsprechend der css-formtierung dargestellt werden. css sagt sicherlich weißer adler auf weißem grund o.ä.

Jupp, das ist vermutlich dann ursächlich. Kann er einfach testen, schlicht Link im Text platzieren und gucken, ob der auch verschwindet.

[top]

Ich habe zwar kein iPhone, kenne es aber auch, dass z. B. der neue Edge vermeintliche Telefonnummern als Link markiert und entsprechende CSS-Darstellung von Links verwendet.

Was passiert denn, wenn du die Nummer mal Testweise als Link mit "tel:..." einfügst?

Code: Select all

<a href="tel:0123456789">0123456789</a>

Sollten diese Links dann auch unsichtbar werden, würde ich versuchen es mit entsprechenden CSS-Regeln wider sichtbar zu machen. (Und versuchen das Aussehen von Links rückgängig zu machen. )

Code: Select all

a[href^="tel:"] {                   /*Auswahl aller Links dessen Linkziel mit tel: beginnen */
  display: inline !important;       /* Eventuelles display: none rückgängig machen */ 
  visibility: visible !important;   /* Eventuelles hidden rückgängig machen */
  color: inherit !important;        /* Farbe des Elternelements übernehmen */
  text-decoration: none !important; /* Unterstrich entfernen */
  cursor: default !important;       /* Änderung des Mauszeigers verhindern */ 
}

Ach ja, Danke für den Hinweis mit der Meta. Kann ich vielleicht auch mal gebrauchen.

[Oliver Georgi]

Vorsicht mit den Spatzen und den Kanonenkugeln, nicht unnütz CSS-Filter anwenden. Außerdem will man am Mobiltelefon bzw. auch im Browser genau dieses Verhalten heutzutage, nämlich dass die Telefonnummer sofort für eine Weiterverwendung nutzbar ist.

[top]

Schon klar, normalerweise brauche ich hier auch keinen !important-Vorschlaghammer.
Da hätte ich besser mal dazu geschrieben, dass es nur als schneller Test gedacht ist, ob es einer der drei Hauptverdächtigen ist. (display, visibility oder color)

Das Aussehen der Telefon-Links würde ich trotzdem an den Rest der Seite anpassen. Die sind bei mir selten unterstrichen und knallblau. Die sollen dann gefälligst so aussehen wie andere Links auf der Seite (oder auch wie normaler Text, wenn das z. B. nur eine Pflichtangabe ist auf der man lieber nicht angerufen werden will. )

Das Anpassen des Mauszeigers sehe ich (noch) nicht so kritisch. Bei einer Touchbedienung gibt es keinen Cursor und bei PCs gibt es (noch) kaum jemanden der mit dem Computer telefoniert.

[Uwe367]

Guten Abend allerseits.
Erstmal Danke für die vielen Antworten zu dem Thema.
Leider kann ich das selbst auch nicht nachvollziehen da ich nicht im Besitz eines IPhones bin und die Emulatoren, die im Netz rumschwirren, geben dieses Verhalten leider nicht wieder.
Ich bin Android Fan und da gibts absolut keine Probleme. Daher muß ich mich auf das verlassen was mir andere zu diesem Thema sagen.
Ich werde verschiedene Dinge, die hier geschrieben wurden, ausprobieren und mich dann wieder melden.

Und zum Thema weißer Adler auf weißem Grund...
Kann nicht sein da der weiße Adler auf einer farbigen Hintergrundgrafik sitzt bzw. sitzen sollte

[Oliver Georgi]

Schick mir Link zur Seite – ich habe den Xcode Simulator (alle iOS ab Version 4 verfügbar und alle Plattformen iPad, iPhone, Apple TV), d.h. kann dann auch mit Safari den DOM prüfen und sehen, was CSS-technisch schief läuft.

Es gibt im Netz keine iOS Simulatoren!!! Wenn, sind das iFrames, die lediglich die Größe imitieren.