Bagaimana cara menghapus gaya biru nomor telepon di iPhone / iOS?


198

Apakah ada cara untuk menghapus warna hyperlink biru default dari nomor telepon ketika dilihat pada iPhone? Suka menambahkan tag Safari Seluler atau CSS tertentu?

Saya hanya memiliki ini untuk nomor:

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

Dan tidak ada hyperlink tetapi iPhone masih menjadikan nomor teks ini sebagai hyperlink. Saya memiliki masalah render ini di beberapa situs web saya tetapi tidak dapat melihat mengapa ini terjadi.

Saya memang membaca posting ini:

Nomor rendering HTML seluler

Tetapi apakah itu satu-satunya solusi yang mungkin?


Tidak sepenuhnya yakin apakah ini hal yang sama, dapatkah Anda memeriksanya? stackoverflow.com/questions/3712475/…
Pekka

3
@ Pekka: Saya pikir pertanyaan ini serupa tetapi berbeda. Itu tentang mencegah sesuatu dari ditafsirkan secara salah sebagai nomor telepon. Ini tampaknya tentang mencegah nomor-nomor telepon nyata untuk merusak desain Anda.
Chuck

Jawaban:


419

Dua pilihan…

1. Atur format-detectiontag meta.

Untuk menghapus semua pemformatan otomatis untuk nomor telepon, tambahkan ini ke dokumen headAnda html:

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

Lihat lebih banyak Kunci Meta Tag Khusus Apple .

Catatan: Jika Anda memiliki nomor telepon pada halaman dengan nomor-nomor ini, Anda harus memformatnya secara manual sebagai tautan:

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

2. Tidak dapat menetapkan tag meta? Ingin menggunakan css?

Dua cssopsi:


Opsi 1 (lebih baik untuk halaman web)

Tautan target dengan hrefnilai yang dimulai dengan telmenggunakan pemilih atribut css ini:

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

Opsi 2 (lebih baik untuk templat email html)

Sebagai alternatif, Anda dapat ketika Anda tidak dapat mengatur meta tag — seperti dalam email html — membungkus nomor telepon dalam tautan / anchor tag ( <a href=""></a>) dan kemudian menargetkan gaya mereka menggunakan css yang mirip dengan yang berikut ini dan menyesuaikan properti spesifik yang perlu Anda atur ulang :

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

Jika Anda ingin menargetkan tautan tertentu, gunakan kelas pada tautan Anda lalu perbarui pemilih css di atas a[x-apple-data-detectors].class-name.


Hai Beausmith, terima kasih atas jawaban Anda. Akhirnya menggunakan solusi pertama Anda di beberapa waktu lalu ... hanya ingin tahu apakah ada solusi lain untuk masalah ini.
Reno

1
@ Bee Smith, itu berhasil juga untuk saya, tetapi tidak di Safari iPod 1st Generation. Apakah ada tag khusus untuk browser lama itu?
Lado Lomidze

12
45 jawaban dan masih belum membuat solusi? :)
kaleazy

Ini jawabannya. Punya halaman kontak yang angka-angkanya tidak akan muncul di iPad dan iPhone. Ini berhasil, terima kasih!
tahdhaze09

1
RE menggunakan tautan 'tel:' untuk menandai nomor telepon: juga disarankan untuk menggunakan mikroformats sebagai alternatif ( ux.stackexchange.com/a/21121/36009 ).
David Cook

163

Hanya untuk menguraikan saran sebelumnya oleh David Thomas:

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

Menambahkan ini ke css Anda meninggalkan fungsi nomor telepon tetapi menghapus garis bawah dan cocok dengan warna yang Anda gunakan pada awalnya.

Aneh bahwa saya dapat memposting jawaban saya sendiri tetapi saya tidak dapat menanggapi jawaban orang lain ..


1
Ini adalah solusi terbaik TETAPI harus seperti ini saya percaya: a [href ^ = "tel"] {color: inherit; teks-dekorasi: tidak ada; } Setidaknya itulah yang bekerja untuk saya. Anda memerlukan tanda kutip ganda ("") seperti yang disebutkan di sini: stackoverflow.com/questions/3859101/what-does-ahref-do-in-css
Panagiotis Palladinos

Saya telah menambahkan tanda kutip. Meskipun dapat bekerja tanpa menggunakan kutipan, spesifikasi CSS memang membutuhkannya untuk string. Terima kasih Panagiotis.
Silverback

Terima kasih! Ini membuatku gila. Jawaban terbaik untuk mempertahankan fungsi juga (dan mungkin seharusnya menjadi jawaban yang dikenal!)
Rexxo

28

Jika Anda ingin mempertahankan fungsi nomor telepon, tetapi cukup hapus garis bawahnya untuk tujuan tampilan, Anda dapat mendesain tautannya seperti yang lain:

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

Saya belum melihat dokumentasi yang menyarankan kelas diterapkan ke tautan nomor telepon, jadi Anda harus menambahkan kelas / id ke tautan yang Anda inginkan memiliki gaya yang berbeda.

Atau Anda dapat menata tautan dengan menggunakan:

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

Yang dipahami oleh iPhone, dan tidak akan diterapkan (sejauh yang saya tahu, mungkin Android, Blackberry, dll. Pengguna / pengembang dapat berkomentar) oleh UA lain.


6
Mungkin ide yang bagus untuk digunakan a[href^=tel:]agar Anda tidak secara tidak sengaja mencocokkan hrefs dengan telephone.htmldll.
Mattias Wadman

1
@MattiasWadman saran Anda tidak berfungsi untuk saya di Chrome atau Safari seluler.
cfx

13

Jika orang menemukan pertanyaan ini di Google, yang perlu Anda lakukan adalah memperlakukan nomor telepon sebagai tautan karena Apple akan secara otomatis mengaturnya sebagai satu.

HTML Anda

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

css Anda

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

Inilah yang saya cari, semua komentar teratas gagal menyebutkan ini secara eksplisit.
n8win

10

Karena kami menggunakan tautan tel: di situs dengan ikon telepon: sebelum sebagian besar solusi yang diposting di sini menimbulkan masalah lain.

Saya menggunakan meta-tag:

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

Ini dikombinasikan dengan menentukan tel: tautan di seluruh situs tempat tautan itu seharusnya dihubungkan!

Menggunakan css sebenarnya bukan pilihan karena menyembunyikan tautan yang relevan.


1
Terima kasih untuk ini! Berfungsi sempurna pada Cordova / Ionic.
TechnoTim

6

Trik sederhana berhasil bagi saya, menambahkan objek tersembunyi di tengah nomor telepon.

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

Ini akan membantu Anda mengganti warna nomor telepon untuk iOS.


Ini berfungsi, tetapi merusak fungsionalitas tautan. Untuk membutuhkan sesuatu dalam keadaan darurat (seperti hari ini) tidak apa-apa.
karolus

1
Contoh Anda tidak berfungsi untuk saya, tetapi joiner lebar nol & zwj; melakukan trik.
Der_Meister

5

Sebuah pertanyaan lama tetapi karena tidak ada jawaban di atas yang baik untuk saya, saya memposting bagaimana saya menyelesaikannya

Saya memiliki nomor telepon dalam daftar:

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

css:

.phone_menu{
  color:orange;
}

Tapi di iPad / iPhone warnanya hitam, jadi saya hanya menambahkan ini ke css:

.phone_menu a{
  color:orange;
}

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


2

Saya sudah bolak-balik antara

1.

    <a href="tel:5551231234">

2.

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

Mencoba membuat kode yang sama berfungsi untuk desktop dan iPhone. Masalahnya adalah bahwa jika opsi pertama digunakan dan Anda mengkliknya dari peramban desktop itu memberikan pesan kesalahan, dan jika yang kedua digunakan itu menonaktifkan fungsi tab-untuk-menelepon pada iPhone iOS5.

Jadi saya mencoba dan mencoba dan ternyata iPhone memperlakukan nomor telepon sebagai jenis tautan khusus yang dapat diformat dengan CSS sebagai satu. Saya membungkus nomor tersebut dalam tag alamat (itu akan bekerja dengan tag HTML lainnya, coba saja hindari <a>tag) dan menaruhnya di CSS sebagai

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

dan itu berhasil - di browser desktop menunjukkan teks biasa dan di ponsel Safari ditampilkan sebagai tautan dengan jendela Panggilan / Batalkan muncul di tab dan tanpa warna biru default serta garis bawah.

Berhati-hatilah dengan aturan css yang diterapkan pada angka terutama saat menggunakan padding / margin.


2

Tidak perlu menghapus deteksi format dengan menggunakan <meta name="format-detection" content="telephone=no">. Coba gunakan nomor telepon di tag apa saja daripada tag jangkar dan gaya sesuai misalnya:span { background:none !important; border:0; padding:0; }


1

<meta name="format-detection" content="telephone=no">. Metatag ini berfungsi di browser Safari default di perangkat iOS dan hanya akan berfungsi untuk nomor telepon yang tidak terbungkus dalam tautan telepon sehingga

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

baris pertama tidak akan diformat sebagai tautan jika Anda menentukan metatag tetapi baris kedua akan karena diikat dengan jangkar telepon.


Anda dapat melepaskan metatag secara bersamaan dan menggunakan mixin seperti

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

untuk mempertahankan gaya yang diinginkan dari nomor telepon Anda, tetapi Anda harus memastikan bahwa Anda membungkusnya dengan jangkar telepon.

Jika Anda ingin ekstra hati-hati dan melindungi terhadap kejadian nomor telepon yang tidak diformat dengan baik dengan tag jangkar pembungkus Anda dapat menelusuri DOM dan menyesuaikan dengan skrip ini. Sesuaikan pola penggantian yang diinginkan.

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

atau bahkan lebih baik tanpa 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>');

1

Jika Anda tidak berniat untuk memiliki nomor telepon di halaman Anda, maka <meta name="format-detection" content="telephone=no"> akan berfungsi dengan baik. Tapi secara retoris, bagaimana jika Anda berniat menggunakan campuran nomor telepon dan non-telepon?

Dengan anggapan Anda hanya mengkodekan angka ke dalam HTML, peretasan "sisipkan barang di tengah angka" akan berhasil. Tapi mereka sedikit atau tidak ada gunanya untuk halaman dinamis, seperti menggunakan PHP untuk menampilkan data numerik dari suatu query.

Sebagai contoh, saya menghasilkan daftar populasi kota. Beberapa populasi cukup besar untuk menyebabkan Mobile Safari mengubahnya menjadi tautan nomor telepon. Untungnya, yang harus saya lakukan adalah menggunakan PHP di number_format()sekitar output array untuk memasukkan "ribuan" koma:

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

Pemformatan ini cukup untuk meyakinkan Mobile Safari bahwa ada tujuan yang agak lebih spesifik untuk nomor tersebut, sehingga tidak lagi mengubah nomor saya yang lebih besar ke dalam tautan telepon. Hal yang sama berlaku untuk saran oleh @davidcondrey tentang penggunaan <a href="tel:18001234567">1-800-123-4567</a>untuk menentukan tujuan ke nomor tersebut.

Intinya adalah bahwa Safari Mobile tampaknya memperhatikan semantik. Mengingat bahwa HTML5 dibangun di sekitar markup semantik, dan mesin pencari mengandalkan markup semantik, saya bermaksud untuk menggunakannya sebanyak yang saya bisa.


1

Menempatkan nomor dalam <fieldset> akan mencegah iOS dari mengubah nomor ke tautan untuk beberapa alasan. Dalam beberapa kasus ini bisa menjadi solusi yang tepat. Saya tidak menganjurkan selimut yang menonaktifkan konversi ke tautan.


1

iOS membuat nomor telepon dapat diklik secara default (untuk alasan yang jelas). Tentu saja, itu menambahkan tag tambahan yang mengesampingkan gaya Anda jika nomor telepon Anda belum memiliki tautan.

Untuk memperbaikinya, coba tambahkan ini ke stylesheet Anda: a[href^=tel] { color: inherit; text-decoration: none; }

Itu akan membuat nomor telepon Anda ditata seperti yang Anda harapkan tanpa menambahkan markup tambahan.


0

Coba gunakan menempatkan karakter ASCII untuk tanda hubung di antara pemisahan digit.

dari ini: -

untuk ini: &ndash;

mis: ubah 555-555-5555=>555&ndash;555&ndash;5555


0

Ini melakukannya untuk saya:

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

Anda dapat menemukan info lebih lanjut di sini .


0

Di Joomla Yootheme bekerja untuk saya:

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


-2

Jika Anda hanya ingin menghindari tautan nomor telepon, coba gunakan tag font:

<p>800<font>-</font>555<font>-<font>1212</p>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.