İPhone'da görüntülendiğinde varsayılan mavi köprü rengini telefon numarasından kaldırmanın bir yolu var mı? Eklenecek belirli bir Mobil Safari etiketi veya CSS gibi mi?

Ben sadece bu numara için yerinde var:

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

Ve köprü yok, ancak iPhone hala bu metin numarasını köprü olarak gösteriyor. Bazı web sitelerimde bu oluşturma sorunu var, ancak bunun neden olduğunu göremiyorum.

Bu yazıyı okudum:

Mobil HTML oluşturma numaraları

Ancak bu mümkün olan tek çözüm müdür?

İki seçenek…

1. format-detectionMeta etiketi ayarlayın .

Bu eklemek, telefon numaraları için tüm otomatik biçimlendirmeyi kaldırmak için headsizin bir htmlbelgede:

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

Diğer Apple Özel Meta Etiket Anahtarları'nı görüntüleyin .

Not: Sayfada bu numaralara sahip telefon numaralarınız varsa, bunları manuel olarak bağlantı olarak biçimlendirmeniz gerekir:

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

2. Meta etiket ayarlanamıyor mu? Kullanmak ister misiniz css?

İki cssseçenek:

Seçenek 1 (web sayfaları için daha iyi)

Bu css öznitelik seçicisini kullanarak hrefbaşlayan değerlerle bağlantıları hedefleyin tel:

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

Seçenek 2 (HTML e-posta şablonları için daha iyi)

Alternatif olarak, html e-postasında olduğu gibi bir meta etiket ayarlayamadığınızda, telefon numaralarını bağlantı / bağlantı etiketlerine ( <a href=""></a>) sarabilir ve ardından aşağıdakine benzer css kullanarak stillerini hedefleyebilir ve sıfırlamanız gereken belirli özellikleri ayarlayabilirsiniz :

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

Belirli bağlantıları hedeflemek istiyorsanız, bağlantılarınızdaki sınıfları kullanın ve yukarıdaki css seçiciyi olarak güncelleyin a[x-apple-data-detectors].class-name.

David Thomas'ın daha önceki bir önerisini ayrıntılandırmak için:

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

Bunu css'nize eklemek telefon numarasının işlevselliğini bırakır, ancak alt çizgiyi çıkarır ve orijinal olarak kullandığınız renkle eşleşir.

Kendi cevabımı gönderebilmem garip ama bir başkasının cevabına cevap veremem ..

Telefon numarasının işlevini korumak , ancak yalnızca görüntüleme amacıyla alt çizgiyi kaldırmak istiyorsanız, bağlantıyı başka herhangi bir şekilde biçimlendirebilirsiniz:

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

Telefon numarası bağlantılarına bir sınıfın uygulandığını gösteren belgeler görmedim, bu nedenle farklı bir stile sahip olmak istediğiniz bağlantılara sınıflar / kimlikler eklemeniz gerekecek .

Alternatif olarak, bağlantıyı aşağıdakileri kullanarak biçimlendirebilirsiniz:

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

Bu iPhone tarafından anlaşılır ve başka bir UA tarafından (bildiğim kadarıyla Android, Blackberry, vb. Kullanıcılar / devs yorum yapabilir) uygulanmayacaktır.

Kullanıcıların bu soruyu Google'da bulması durumunda, tek yapmanız gereken telefon numarasını bir bağlantı olarak ele almaktır çünkü Apple otomatik olarak bir olarak ayarlayacaktır.

HTML'niz

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

css'in

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

Telefon simgesi bulunan bir sitede tel: bağlantılar kullandığımız için: burada yayınlanan çözümlerin çoğunda başka bir sorun ortaya çıkar.

Meta etiketi kullandım:

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

Bu, bağlanması gereken site genelinde tel: bağlantılar belirtmekle birleşti !

İlgili tel bağlantıları gizlediğinden css kullanmak gerçekten bir seçenek değildir.

Basit numara, telefon numarasının ortasına gizli bir nesne ekleyerek benim için çalıştı.

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

Bu, IOS için telefon numarası rengini geçersiz kılmanıza yardımcı olacaktır.

Eski bir soru ama yukarıdaki cevapların hiçbiri benim için iyi olmadığı için nasıl çözdüğümü gönderiyorum

Listede bir telefon numaram var:

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

css:

.phone_menu{
  color:orange;
}

Ancak iPad / iPhone'da siyahtı, bu yüzden bunu css'e ekledim:

.phone_menu a{
  color:orange;
}

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

Beau Smith'e göre bu konudan: iPhone / iOS'taki mavi telefon numaralarının stilini nasıl kaldırabilirim?

Bağlantınızın href özelliğine şu şekilde "tel:" uygulamanız gerekir:

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

Telefon numarası dizesine herhangi bir ek stil ve DOM kaldıracaktır.

Arasında gidip geliyorum

1.

    <a href="tel:5551231234">

2.

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

Masaüstü ve iPhone için aynı kodu kullanmaya çalışın. Sorun, ilk seçenek kullanılırsa ve bir masaüstü tarayıcısından tıklarsanız bir hata mesajı verir ve ikincisi kullanılırsa, iPhone iOS5'te sekme-ara işlevini devre dışı bırakmasıydı.

Bu yüzden denedim ve denedim ve iPhone'un telefon numarasını CSS ile biçimlendirilebilen özel bir bağlantı türü olarak gördüğü ortaya çıktı. Numarayı bir adres etiketine tamamladım (başka bir HTML etiketiyle çalışır, <a>etiketten kaçınmayı deneyin ) ve CSS'de stil olarak

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

ve çalıştı - bir masaüstü tarayıcısında düz bir metin gösterdi ve Safari cep telefonunda Çağrı / İptal penceresi sekmede açılır ve varsayılan mavi renk ve alt çizgi olmadan bir bağlantı olarak gösterildi.

Özellikle dolgu / kenar boşluğu kullanırken numaraya uygulanan css kurallarına dikkat edin.

Biçim algılamayı kullanarak kaldırmaya gerek yoktur <meta name="format-detection" content="telephone=no">. Telefon numarasını etiket yerine herhangi bir etikette kullanmayı deneyin ve buna göre stil verin:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Bu meta etiket iOS aygıtlarındaki varsayılan Safari tarayıcısında çalışır ve yalnızca bir telefon bağlantısına sarılmamış telefon numaraları için çalışır;

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

meta etiketi belirtirseniz ilk satır bağlantı olarak biçimlendirilmez, ancak ikinci satır bir telefon bağlantısına sarıldığından dolayı olur.

Meta etiketten hep birlikte vazgeçebilir ve gibi bir mixin kullanabilirsiniz

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

telefon numaralarınızın amaçlanan stilini korumak için, ancak bunları bir telefon bağlantısına sardığınızdan emin olmalısınız.

Ekstra dikkatli olmak ve bir sarma bağlantı etiketi ile düzgün biçimlendirilmemiş bir telefon numarasına karşı korumak istiyorsanız, DOM'u inceleyebilir ve bu komut dosyasıyla ayarlayabilirsiniz. Değiştirme düzenini istediğiniz gibi ayarlayın.

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

veya jQuery olmadan daha da iyi

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

Sayfanızda herhangi bir telefon numarası olmasını istemiyorsanız, <meta name="format-detection" content="telephone=no"> iyi çalışır. Ancak retorik olarak konuşursak, ya telefon ve telefon dışı numaraların bir karışımını kullanmayı düşünüyorsanız?

HTML'nize yalnızca sabit kodlama yaptığınızı varsayarsak, "rakamlarınızın ortasına öğe ekleyin" saldırıları işe yarayacaktır. Ancak, bir sorgudan sayısal veri çıkarmak için PHP kullanmak gibi dinamik sayfalar için çok az veya hiç kullanışsızdır.

Örnek olarak, bir şehir nüfusu listesi hazırlıyordum. Bazı popülasyonlar, Mobile Safari'nin onları telefon numarası bağlantılarına dönüştürmesine neden olacak kadar büyüktü. Neyse ki, tek yapmam gereken number_format()"binlerce" virgül eklemek için dizi çıktısının etrafında PHP kullanmaktı :

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

Bu biçimlendirme, Mobile Safari'yi numara için biraz daha spesifik bir amaç olduğu konusunda ikna etmek için yeterliydi, bu yüzden daha büyük sayılarımı artık telefon bağlantılarına dönüştürmedi. Aynı şey, @davidcondrey tarafından numaraya <a href="tel:18001234567">1-800-123-4567</a>bir amaç belirtmek için kullanılması önerisi için de geçerlidir .

Sonuç olarak, Safari Mobile'ın görünüşe göre semantiğe dikkat ettiği. HTML5'in semantik işaretleme etrafında oluşturulduğu ve arama motorlarının semantik işaretlemeye bağlı olduğu göz önüne alındığında, olabildiğince kullanmayı planlıyorum.

Sayıyı bir <fieldset> içine koymak, iOS'un bir nedenden ötürü sayıyı bir bağlantıya dönüştürmesini önler. Bazı durumlarda bu doğru çözüm olabilir. Bağlantılara dönüşmeyi engelleyecek bir battaniyeyi savunmuyorum.

iOS, telefon numaralarını varsayılan olarak tıklanabilir hale getirir (belirgin nedenlerden dolayı). Tabii ki, telefon numaranız zaten bir bağlantı değilse stilinizi geçersiz kılan ekstra bir etiket ekler.

Düzeltmek için bunu stil sayfanıza eklemeyi deneyin: a[href^=tel] { color: inherit; text-decoration: none; }

Bu, ek işaretleme eklemeden telefon numaralarınızı beklediğiniz gibi şekillendirmelidir.

Rakam ayrımları arasına tire için ASCII karakterini yerleştirmeyi deneyin.

bundan: -

buna: –

ör .: change 555-555-5555=>555–555–5555

Bu benim için yaptı:

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

Daha fazla bilgiyi burada bulabilirsiniz .

Joomla Yootheme'de benim için çalışıyor:

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

Bu x-ms-format-algılama = "none" özelliği telefon biçimini işler.

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>

Sadece telefon numaralarının bağlantı olmasını önlemek istiyorsanız, yazı tipi etiketini kullanmayı deneyin:

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