Czy istnieje sposób na usunięcie domyślnego niebieskiego koloru hiperłącza z numeru telefonu podczas oglądania na iPhonie? Chcesz dodać konkretny tag Mobile Safari lub CSS?

Mam to tylko dla numeru:

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

I nie ma żadnych hiperłączy, ale iPhone nadal renderuje ten numer tekstu jako hiperłącze. Mam problem z renderowaniem na niektórych moich stronach, ale nie mogę zrozumieć, dlaczego tak się dzieje.

Przeczytałem ten post:

Mobilne numery renderowania HTML

Ale czy to jedyne możliwe rozwiązanie?

Dwie opcje…

1. Ustaw format-detectionmetatag.

Aby usunąć wszystkie automatycznego formatowania numerów telefonów, dodać to do headswojego htmldokumentu:

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

Wyświetl więcej specyficznych dla Apple klawiszy metatagów .

Uwaga: jeśli masz numery telefonów na stronie z tymi numerami, powinieneś ręcznie sformatować je jako linki:

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

2. Nie możesz ustawić metatagu? Chcesz użyć css?

Dwie cssopcje:

Opcja 1 (lepsza dla stron internetowych)

Docelowe linki z hrefwartościami zaczynającymi się telod przy użyciu tego selektora atrybutów css:

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

Opcja 2 (lepsza dla szablonów e-mail HTML)

Ewentualnie możesz, gdy nie możesz ustawić metatagu - na przykład w e-mailu HTML - zawijać numery telefonów w tagi link / anchor ( <a href=""></a>), a następnie kierować ich style za pomocą css podobnego do poniższego i dostosowywać właściwości, które musisz zresetować :

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

Jeśli chcesz kierować na określone linki, użyj klas na swoich linkach, a następnie zaktualizuj selektor css powyżej do a[x-apple-data-detectors].class-name.

Aby rozwinąć wcześniejszą sugestię Davida Thomasa:

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

Dodanie tego do css pozostawia funkcjonalność numeru telefonu, ale usuwa podkreślenie i odpowiada kolorowi, którego pierwotnie używałeś.

Dziwne, że mogę opublikować własną odpowiedź, ale nie mogę odpowiedzieć na czyjąś odpowiedź.

Jeśli chcesz zachować funkcję numeru telefonu, ale po prostu usuń podkreślenie do celów wyświetlania, możesz stylizować link jak każdy inny:

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

Nie widziałem dokumentacji, która sugeruje, że klasa jest stosowana do linków do numeru telefonu, więc musisz dodać klasy / identyfikatory do linków, które chcesz mieć inny styl.

Alternatywnie możesz stylizować link za pomocą:

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

Co jest zrozumiałe dla iPhone'a i nie będzie stosowane (o ile wiem, być może Android, Blackberry itp. Użytkownicy / deweloperzy mogą komentować) przez inne UA.

Jeśli ludzie znajdą to pytanie w Google, wystarczy potraktować numer telefonu jako link, ponieważ Apple automatycznie ustawi go jako jeden.

twój HTML

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

twój css

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

Ponieważ używamy linków tel: na stronie z ikoną telefonu: zanim większość opublikowanych tutaj rozwiązań wprowadza kolejny problem.

Użyłem metatagu:

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

W połączeniu z podaniem tel: linków w całej witrynie, gdzie powinny być powiązane!

Korzystanie z css nie jest tak naprawdę opcją, ponieważ ukrywa odpowiednie linki tel.

Prosta sztuczka zadziałała dla mnie, dodając ukryty obiekt na środku numeru telefonu.

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

Pomoże to zastąpić kolor numeru telefonu dla IOS.

Stare pytanie, ale ponieważ żadna z powyższych odpowiedzi nie była dla mnie dobra, ogłaszam, jak je rozwiązałem

Mam numer telefonu na liście:

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

css:

.phone_menu{
  color:orange;
}

Ale na iPadzie / iPhonie było czarne, więc właśnie dodałem to do css:

.phone_menu a{
  color:orange;
}

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

Według Beau Smitha na ten temat: Jak usunąć niebieską stylizację numerów telefonów na iPhonie / iOS?

Powinieneś zastosować „tel:” w atrybucie href swojego linku w następujący sposób:

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

Spowoduje to usunięcie dodatkowego stylu i DOM z ciągu numeru telefonu.

Chodziłem tam iz powrotem

1.

    <a href="tel:5551231234">

2)

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

Próbuję sprawić, by ten sam kod działał na komputerze stacjonarnym i telefonie iPhone. Problem polegał na tym, że jeśli pierwsza opcja zostanie użyta i klikniesz ją w przeglądarce na komputerze, pojawi się komunikat o błędzie, a jeśli druga zostanie użyta, wyłączy funkcję „tab-to-call” w telefonie iPhone z systemem iOS5.

Więc próbowałem i okazało się, że iPhone traktuje numer telefonu jako specjalny rodzaj linku, który można sformatować za pomocą CSS jako jednego. Owinąłem numer w tagu adresu (działałby z dowolnym innym tagiem HTML, po prostu unikaj <a>tagu) i nadałem mu styl CSS jako

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

i zadziałało - w przeglądarce na komputerze wyświetlał się zwykły tekst, aw przeglądarce Safari pokazany był link z okienkiem Zadzwoń / Anuluj wyskakującym na karcie i bez domyślnego niebieskiego koloru i podkreślenia.

Bądź ostrożny z regułami css stosowanymi do liczby, szczególnie gdy używasz padding / margin.

Nie trzeba usuwać wykrywania formatu za pomocą <meta name="format-detection" content="telephone=no">. Spróbuj użyć numeru telefonu w dowolnym tagu zamiast tagu zakotwiczenia i odpowiednio go nadaj styl, np .:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Ten metatag działa w domyślnej przeglądarce Safari na urządzeniach z iOS i działa tylko w przypadku numerów telefonów, które nie są zawinięte w łącze telefoniczne, więc

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

pierwsza linia nie zostanie sformatowana jako link, jeśli podasz metatag, ale druga linia zrobi to, ponieważ jest owinięta w kotwicę telefoniczną.

Możesz całkowicie zrezygnować z metatagu i użyć mixinu, takiego jak

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

aby zachować zamierzony styl numerów telefonów, ale musisz upewnić się, że są one owinięte w kotwicę telefoniczną.

Jeśli chcesz zachować szczególną ostrożność i zabezpieczyć się przed zdarzeniem numeru telefonu, który nie jest poprawnie sformatowany za pomocą zawijanego znacznika kotwicy, możesz przejść do modelu DOM i dostosować go za pomocą tego skryptu. Dostosuj wzór zastępczy zgodnie z potrzebami.

$('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>'));

lub nawet lepiej bez 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>');

Jeśli nie zamierzasz mieć żadnych numerów telefonów na swojej stronie, <meta name="format-detection" content="telephone=no"> będzie działać dobrze. Ale retorycznie rzecz biorąc, co zrobić, jeśli zamierzasz użyć kombinacji numerów telefonu i innych niż numery telefonów?

Zakładając, że po prostu zapisujesz cyfry w swoim HTML, hacki „wstaw tekst w środku twoich cyfr” będą działać. Są one jednak mało przydatne dla stron dynamicznych, takich jak PHP do wyprowadzania danych liczbowych z zapytania.

Jako przykład wygenerowałem listę populacji miast. Niektóre populacje były na tyle duże, że Mobile Safari zmieniło je w łącza do numerów telefonów. Na szczęście wszystko, co musiałem zrobić, to użyć PHP number_format()wokół danych wyjściowych tablicy, aby wstawić przecinki „tysiące”:

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

To formatowanie wystarczyło, aby przekonać Mobile Safari, że ten numer miał nieco bardziej szczegółowy cel, więc nie zastąpił już moich większych numerów linkami telefonicznymi. To samo dotyczy sugestii @davidcondrey o użyciu<a href="tel:18001234567">1-800-123-4567</a> by celu podania celu liczby.

Podsumowując, Safari Mobile najwyraźniej zwraca uwagę na semantykę. Biorąc pod uwagę, że HTML5 opiera się na znacznikach semantycznych, a wyszukiwarki polegają na znacznikach semantycznych, zamierzam go używać w jak największym stopniu.

Umieszczenie numeru w polu <pole> z jakiegoś powodu uniemożliwi iOSowi konwersję numeru na link. W niektórych przypadkach może to być właściwe rozwiązanie. Nie opowiadam się za kocem uniemożliwiającym konwersję na linki.

iOS domyślnie umożliwia klikanie numerów telefonów (z oczywistych powodów). Oczywiście dodaje to dodatkowy tag, który zastępuje styl, jeśli Twój numer telefonu nie jest już linkiem.

Aby to naprawić, spróbuj dodać to do arkusza stylów: a[href^=tel] { color: inherit; text-decoration: none; }

To powinno utrzymywać styl numerów telefonów zgodnie z oczekiwaniami, bez dodawania dodatkowych znaczników.

Spróbuj wstawić znak ASCII dla myślnika między separacjami cyfr.

od tego: -

do tego: –

np .: zmiana 555-555-5555=>555–555–5555

Zrobiło to dla mnie:

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

Więcej informacji znajdziesz tutaj .

W Joomla Yootheme działa dla mnie:

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

Ten atrybut x-ms-format-detection = "none" obsługuje format telefonu.

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>

Jeśli po prostu chcesz w ogóle uniknąć numerów telefonów, spróbuj użyć znacznika czcionki:

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