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?
html
ios
css
mobile-safari
Reno
źródło
źródło
Odpowiedzi:
Dwie opcje…
1. Ustaw
format-detection
metatag.Aby usunąć wszystkie automatycznego formatowania numerów telefonów, dodać to do
head
swojegohtml
dokumentu:Wyświetl więcej specyficznych dla Apple klawiszy metatagów .
2. Nie możesz ustawić metatagu? Chcesz użyć
css
?Dwie
css
opcje:Opcja 1 (lepsza dla stron internetowych)
Docelowe linki z
href
wartościami zaczynającymi siętel
od przy użyciu tego selektora atrybutów css: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ć :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
.źródło
Aby rozwinąć wcześniejszą sugestię Davida Thomasa:
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ź.
źródło
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:
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ą:
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.
źródło
a[href^=tel:]
aby przypadkowo nie dopasować hrefów dotelephone.html
itp.Jeśli ludzie znajdą to pytanie w Google, wystarczy potraktować numer telefonu jako link, ponieważ Apple automatycznie ustawi go jako jeden.
twój HTML
twój css
źródło
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.
źródło
Prosta sztuczka zadziałała dla mnie, dodając ukryty obiekt na środku numeru telefonu.
Pomoże to zastąpić kolor numeru telefonu dla IOS.
źródło
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:
css:
Ale na iPadzie / iPhonie było czarne, więc właśnie dodałem to do css:
źródło
źródło
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:
Spowoduje to usunięcie dodatkowego stylu i DOM z ciągu numeru telefonu.
źródło
Chodziłem tam iz powrotem
1.
2)
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 jakoi 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.
źródło
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; }
źródło
<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ęcpierwsza 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
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.
lub nawet lepiej bez jQuery
źródło
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.
źródło
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.
źródło
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.
źródło
Spróbuj wstawić znak ASCII dla myślnika między separacjami cyfr.
od tego: -
do tego:
–
np .: zmiana
555-555-5555
=>555–555–5555
źródło
Zrobiło to dla mnie:
Więcej informacji znajdziesz tutaj .
źródło
W Joomla Yootheme działa dla mnie:
źródło
Ten atrybut x-ms-format-detection = "none" obsługuje format telefonu.
https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx
źródło
Jeśli po prostu chcesz w ogóle uniknąć numerów telefonów, spróbuj użyć znacznika czcionki:
źródło