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?

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.

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

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.

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

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.

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.

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

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

Menurut Beau Smith dari subjek ini: Bagaimana cara menghapus styling biru nomor telepon pada iPhone / iOS?

Anda harus menerapkan "tel:" di atribut href tautan Anda seperti ini:

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

Ini akan menghapus gaya tambahan dan DOM ke string nomor telepon.

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.

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

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

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.

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.

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.

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

dari ini: -

untuk ini: –

mis: ubah 555-555-5555=>555–555–5555

Ini melakukannya untuk saya:

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

Anda dapat menemukan info lebih lanjut di sini .

Di Joomla Yootheme bekerja untuk saya:

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

Atribut x-ms-format-detection = "none" ini menangani telepon format.

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>

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

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