Esiste un modo per rimuovere il colore di collegamento ipertestuale blu predefinito da un numero di telefono quando visualizzato su un iPhone? Ti piace aggiungere uno specifico tag Safari per dispositivi mobili o CSS?

Ho solo questo posto per il numero:

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

E non ci sono collegamenti ipertestuali, ma iPhone rende ancora questo numero di testo come collegamento ipertestuale. Ho questo problema di rendering su alcuni dei miei siti Web, ma non riesco a capire perché questo accada.

Ho letto questo post:

Numeri di rendering HTML mobili

Ma è l'unica soluzione possibile?

Due opzioni…

1. Imposta il format-detectionmeta tag.

Per rimuovere tutta la formattazione automatica per i numeri di telefono, aggiungilo al headtuo htmldocumento:

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

Visualizza altre chiavi meta tag specifiche di Apple .

Nota: se nella pagina sono presenti numeri di telefono con questi numeri, è necessario formattarli manualmente come collegamenti:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2. Non riesci a impostare un meta tag? Vuoi usare css?

Due cssopzioni:

Opzione 1 (migliore per le pagine Web)

Collegamenti di destinazione con hrefvalori che iniziano con telquesto selettore di attributi css:

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

Opzione 2 (migliore per i modelli di email html)

In alternativa, quando non è possibile impostare un metatag, ad esempio nell'e-mail html, è possibile avvolgere i numeri di telefono nei tag di collegamento / ancoraggio ( <a href=""></a>) e quindi indirizzare i loro stili utilizzando CSS simile al seguente e regolare le proprietà specifiche che è necessario ripristinare :

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

Se si desidera targetizzare collegamenti specifici, utilizzare le classi sui collegamenti e quindi aggiornare il selettore CSS sopra a a[x-apple-data-detectors].class-name.

Giusto per elaborare un precedente suggerimento di David Thomas:

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

L'aggiunta di questo al tuo CSS lascia la funzionalità del numero di telefono, ma rimuove la sottolineatura e corrisponde al colore che stavi usando originariamente.

Strano che io possa pubblicare la mia risposta ma non posso rispondere a qualcun altro ..

Se vuoi mantenere la funzione del numero di telefono, ma rimuovi la sottolineatura a scopo di visualizzazione, puoi modellare il collegamento come qualsiasi altro:

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

Non ho visto la documentazione che suggerisce che una classe sia applicata ai collegamenti dei numeri di telefono, quindi dovrai aggiungere classi / ID ai collegamenti che desideri avere uno stile diverso.

In alternativa puoi modellare il link usando:

a[href^=tel] { /* css */ }

Il che è compreso da iPhone e non verrà applicato (per quanto ne so, forse Android, Blackberry, ecc. Gli utenti / sviluppatori possono commentare) da qualsiasi altro UA.

Nel caso in cui le persone trovino questa domanda su Google, tutto ciò che devi fare è trattare il numero di telefono come un link poiché Apple lo imposterà automaticamente come uno.

il tuo HTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

il tuo css

#phone-text a{color:#fff; text-decoration:none;}

Poiché utilizziamo tel: collegamenti su un sito con un'icona del telefono attiva: prima che la maggior parte delle soluzioni pubblicate qui presenti un altro problema.

Ho usato il meta-tag:

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

Questo combinato con la specifica di tel: link a livello di sito dove dovrebbe essere collegato!

L'uso di CSS non è in realtà un'opzione in quanto nasconde i collegamenti telefonici rilevanti.

Un semplice trucco ha funzionato per me, aggiungendo un oggetto nascosto nel mezzo del numero di telefono.

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

Questo ti aiuterà a sovrascrivere il colore del numero di telefono per IOS.

Una vecchia domanda, ma poiché nessuna delle risposte precedenti è stata positiva per me, ho pubblicato come l'ho risolto

Ho un numero di telefono in un elenco:

<li class="phone_menu">+555 5 555 55 55</li>

css:

.phone_menu{
  color:orange;
}

Ma su iPad / iPhone era nero, quindi ho appena aggiunto questo al CSS:

.phone_menu a{
  color:orange;
}

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

Secondo Beau Smith da questo argomento: come posso rimuovere lo stile blu dei numeri di telefono su iPhone / iOS?

Dovresti applicare "tel:" nell'attributo href del tuo link in questo modo:

<a href="tel:5551231234">555 123-1234</a>

Rimuoverà qualsiasi stile aggiuntivo e DOM nella stringa del numero di telefono.

Sono andato avanti e indietro tra

1.

    <a href="tel:5551231234">

2.

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

Cercando di far funzionare lo stesso codice per desktop e iPhone. Il problema era che se si utilizza la prima opzione e si fa clic da un browser desktop, viene visualizzato un messaggio di errore e, se viene utilizzata la seconda, si disabilita la funzionalità tab-to-call su iPhone iOS5.

Quindi ho provato e ho scoperto che iPhone tratta il numero di telefono come un tipo speciale di collegamento che può essere formattato con CSS come uno. Ho racchiuso il numero in un tag di indirizzo (funzionerebbe con qualsiasi altro tag HTML, basta provare a evitare il <a>tag) e lo stile in CSS come

.myDiv address a {color:#FFF; font-style: normal; text-decoration:none;}

e ha funzionato - in un browser desktop ha mostrato un testo semplice e in un cellulare Safari mostrato come un collegamento con la finestra Chiama / Annulla che appare sulla scheda e senza il colore blu predefinito e sottolineato.

Fai solo attenzione alle regole CSS applicate al numero, specialmente quando usi padding / margin.

Non è necessario rimuovere il rilevamento del formato utilizzando <meta name="format-detection" content="telephone=no">. Prova a utilizzare il numero di telefono in qualsiasi tag anziché in tag di ancoraggio e personalizzalo di conseguenza, ad esempio:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Questa metatag funziona nel browser Safari predefinito sui dispositivi iOS e funziona solo con numeri di telefono che non sono racchiusi in un collegamento telefonico

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

la prima riga non verrà formattata come collegamento se si specifica il metatag ma la seconda riga sarà perché è racchiusa in un ancoraggio telefonico.

Puoi rinunciare al metatag tutti insieme e utilizzare un mixin come

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

per mantenere lo stile previsto per i tuoi numeri di telefono, ma devi assicurarti di avvolgerli in un ancoraggio telefonico.

Se vuoi essere più cauto e proteggere dall'evento di un numero di telefono che non è formattato correttamente con un tag di ancoraggio avvolgente, puoi esplorare il DOM e modificarlo con questo script. Regolare il motivo di sostituzione come desiderato.

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

o ancora meglio senza jQuery

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

Se non hai intenzione di avere numeri di telefono sulla tua pagina, <meta name="format-detection" content="telephone=no"> funzionerà bene. Ma retoricamente parlando, cosa succede se si intende utilizzare un mix di numeri telefonici e non telefonici?

Supponendo che tu stia solo codificando i numeri nel tuo codice HTML, gli hack "inserisci elementi nel mezzo delle tue cifre" funzioneranno. Ma sono di scarsa utilità per le pagine dinamiche, come l'uso di PHP per generare dati numerici da una query.

Ad esempio, stavo generando un elenco di popolazioni di città. Alcune popolazioni erano abbastanza grandi da indurre Mobile Safari a trasformarle in collegamenti di numeri di telefono. Fortunatamente, tutto quello che dovevo fare era usare PHP number_format()attorno all'output dell'array per inserire virgole "migliaia":

<?php echo number_format($row["population"]) ?>

Questa formattazione è stata sufficiente per convincere Mobile Safari che c'era uno scopo un po 'più specifico per il numero, quindi non ha più impostato i miei numeri più grandi sui collegamenti telefonici. Lo stesso vale per il suggerimento di @davidcondrey di utilizzare <a href="tel:18001234567">1-800-123-4567</a>per specificare uno scopo per il numero.

In conclusione, Safari Mobile apparentemente presta attenzione alla semantica. Dato che HTML5 è basato sul markup semantico e che i motori di ricerca si basano sul markup semantico, intendo utilizzarlo il più possibile.

Inserendo il numero in un <fieldset> si impedisce a iOS di convertire il numero in un collegamento per qualche motivo. In alcuni casi questa potrebbe essere la soluzione giusta. Non sostengo una disabilitazione generale della conversione in collegamenti.

iOS rende i numeri di telefono selezionabili per impostazione predefinita (per ovvi motivi). Naturalmente, questo aggiunge un tag extra che sta sovrascrivendo il tuo stile se il tuo numero di telefono non è già un collegamento.

Per risolverlo, prova ad aggiungere questo al tuo foglio di stile: a[href^=tel] { color: inherit; text-decoration: none; }

Ciò dovrebbe mantenere i tuoi numeri di telefono come previsto, senza aggiungere markup extra.

Prova a inserire il carattere ASCII per il trattino tra le separazioni delle cifre.

da questa: -

a questa: –

es: change 555-555-5555=>555–555–5555

Questo ha fatto per me:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

Puoi trovare maggiori informazioni qui .

In Joomla Yootheme lavora per me:

a:not([class]) {
    color: #fff !important;
}

Questo attributo x-ms-format-detect = "none" gestisce il formato telefono.

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

<p id="phone-text" x-ms-format-detection="none"  >Call us on <strong>+44 (0)20 7194 8000</strong></p>

Se vuoi semplicemente evitare che i numeri di telefono siano dei collegamenti, prova a utilizzare il tag font:

<p>800<font>-</font>555<font>-<font>1212</p>