Jak usunąć niebieską stylizację numerów telefonów na iPhonie / iOS?

198

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?

Reno
źródło
Nie jestem pewien, czy to jest to samo, czy możesz to sprawdzić? stackoverflow.com/questions/3712475/…
Pekka
3
@Pekka: Myślę, że to pytanie jest podobne, ale odrębne. Chodziło o to, aby zapobiec niewłaściwej interpretacji czegoś jako numeru telefonu. Wydaje się, że chodzi o to, aby nie dopuścić do zepsucia prawdziwych numerów telefonów.
Chuck,

Odpowiedzi:

418

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.

Beau Smith
źródło
Cześć Beausmith, dziękuję za odpowiedź. Skończyło się na pierwszym rozwiązaniu jakiś czas temu ... po prostu zastanawiałem się, czy istnieje inne rozwiązanie problemu.
Reno
1
@Beau Smith, to też działało dla mnie, ale nie w Safari iPoda 1. generacji. Czy jest jakiś konkretny tag dla tej starej przeglądarki?
Lado Lomidze
12
45 odpowiedzi i wciąż nie znalazłeś rozwiązania? :)
kaleazy 24.09.12
Oto odpowiedź. Miałem stronę kontaktową, na której numery nie byłyby wyświetlane na iPadzie i iPhonie. To załatwiło sprawę, dziękuję!
tahdhaze09
1
RE za pomocą linków „tel:” do numerów telefonów znaczników: sugerowano również stosowanie mikroformatów jako alternatywy ( ux.stackexchange.com/a/21121/36009 ).
David Cook
163

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

Silverback
źródło
1
To najlepsze rozwiązanie, ALE powinno tak wyglądać tak: a [href ^ = "tel"] {color: inherit; dekoracja tekstu: brak; } Przynajmniej to działało dla mnie. Potrzebujesz podwójnych cudzysłowów („”), jak wspomniano tutaj: stackoverflow.com/questions/3859101/what-does-ahref-do-in-css
Panagiotis Palladinos
Dodałem cytaty. Chociaż może działać bez użycia cudzysłowów, specyfikacje CSS wymagają ich dla ciągów znaków. Dzięki Panagiotis.
Silverback
Dzięki! Doprowadzało mnie to do szału. Najlepsza odpowiedź również na zachowanie funkcjonalności (i prawdopodobnie powinna być uznaną odpowiedzią!)
Rexxo
28

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.

David mówi, że przywraca Monikę
źródło
6
Prawdopodobnie dobrym pomysłem jest użycie, a[href^=tel:]aby przypadkowo nie dopasować hrefów do telephone.htmlitp.
Mattias Wadman,
1
@MattiasWadman Twoja sugestia nie działała dla mnie w przeglądarce Chrome ani w mobilnym Safari.
porównaj
13

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;}
sammi
źródło
Właśnie tego szukałem, wszystkie najlepsze komentarze nie wspominają o tym wyraźnie.
n8win
10

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.

Valross.nu
źródło
1
Dziękuję Ci za to! Działa idealnie na Cordova / Ionic.
TechnoTim
6

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.

Arkadas Kilic
źródło
Działa, ale psuje funkcjonalność łącza. Potrzebowanie rzeczy w mgnieniu oka (jak dzisiaj) jest w porządku.
karolus
1
Twój przykład nie działał dla mnie, ale łącznik o zerowej szerokości & zwj; wykonał lewę.
Der_Meister,
5

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;
}
Marko
źródło
4
a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
Ross
źródło
2

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.

Bryana
źródło
2

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

Neetu
źródło
1

<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>');
Davidcondrey
źródło
1

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.

KiloVoltaire
źródło
1

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.

Oliver P.
źródło
1

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.

subindas pm
źródło
0

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

od tego: -

do tego: &ndash;

np .: zmiana 555-555-5555=>555&ndash;555&ndash;5555

Justin Jb Bryant
źródło
0

Zrobiło to dla mnie:

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

Więcej informacji znajdziesz tutaj .

Claudio Pascariello
źródło
0

W Joomla Yootheme działa dla mnie:

a:not([class]) {
    color: #fff !important;
}
Max
źródło
-2

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>
David Lowe
źródło