มีวิธีลบสีไฮเปอร์ลิงก์สีน้ำเงินเริ่มต้นจากหมายเลขโทรศัพท์เมื่อดูบน iPhone หรือไม่ ชอบที่จะเพิ่มแท็ก Mobile Safari หรือ CSS หรือไม่

ฉันมีสิ่งนี้ในจำนวนเท่านั้น:

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

และไม่มีไฮเปอร์ลิงก์ แต่ iPhone ยังคงแสดงหมายเลขข้อความนี้เป็นการเชื่อมโยงหลายมิติ ฉันมีปัญหาการแสดงผลนี้ในบางเว็บไซต์ของฉัน แต่ไม่สามารถดูสาเหตุที่เกิดขึ้นได้

ฉันได้อ่านโพสต์นี้:

หมายเลขการเรนเดอร์ HTML บนมือถือ

แต่นั่นเป็นทางออกเดียวที่เป็นไปได้?

สองทางเลือก ...

1. ตั้งformat-detectionเมตาแท็ก

หากต้องการลบการจัดรูปแบบอัตโนมัติทั้งหมดสำหรับหมายเลขโทรศัพท์ให้เพิ่มส่วนนี้ในเอกสารheadของคุณhtml:

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

ดูเพิ่มเติมแอปเปิ้ลโดยเฉพาะ Meta คีย์แท็ก

หมายเหตุ:หากคุณมีหมายเลขโทรศัพท์ในหน้าด้วยหมายเลขเหล่านี้คุณควรจัดรูปแบบด้วยตนเองเป็นลิงก์:

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

2. ไม่สามารถตั้งเมตาแท็กได้ใช่ไหม ต้องการใช้css?

สองตัวcssเลือก:

ตัวเลือก 1 (ดีกว่าสำหรับหน้าเว็บ)

ลิงก์เป้าหมายด้วยhrefค่าที่ขึ้นต้นด้วยtelโดยใช้ตัวเลือกแอ็ตทริบิวต์ css นี้:

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

ตัวเลือก 2 (ดีกว่าสำหรับเทมเพลตอีเมล html)

หรือคุณสามารถทำได้เมื่อคุณไม่สามารถตั้งเมตาแท็กเช่นในอีเมล html ห่อหมายเลขโทรศัพท์ในแท็ก link / anchor ( <a href=""></a>) จากนั้นกำหนดเป้าหมายสไตล์ของพวกเขาโดยใช้ css คล้ายกับต่อไปนี้และปรับคุณสมบัติเฉพาะที่คุณต้องการรีเซ็ต :

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

หากคุณต้องการที่จะกำหนดเป้าหมายการเชื่อมโยงเฉพาะการเรียนการใช้งานในการเชื่อมโยงของคุณแล้วปรับปรุงตัวเลือก CSS a[x-apple-data-detectors].class-nameด้านบนเพื่อ

เพียงอธิบายอย่างละเอียดเกี่ยวกับข้อเสนอแนะก่อนหน้านี้โดย David Thomas:

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

การเพิ่มสิ่งนี้ลงใน css ของคุณจะทำให้ฟังก์ชันการทำงานของหมายเลขโทรศัพท์หลุดออกมา แต่ขีดเส้นใต้และตรงกับสีที่คุณใช้ในตอนแรก

แปลกที่ฉันสามารถโพสต์คำตอบของตัวเอง แต่ฉันไม่สามารถตอบสนองต่อคนอื่น ..

หากคุณต้องการรักษาฟังก์ชั่นของหมายเลขโทรศัพท์ แต่เพียงลบขีดเส้นใต้เพื่อจุดประสงค์ในการแสดงผลคุณสามารถจัดรูปแบบการเชื่อมโยงเป็นแบบอื่น:

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

ฉันไม่เห็นเอกสารที่แนะนำให้ใช้คลาสกับลิงก์หมายเลขโทรศัพท์ดังนั้นคุณจะต้องเพิ่มคลาส / รหัสลงในลิงก์ที่คุณต้องการให้มีสไตล์แตกต่างกัน

หรือคุณสามารถกำหนดรูปแบบการเชื่อมโยงโดยใช้:

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

สิ่งใดที่ iPhone เข้าใจและจะไม่ถูกนำไปใช้ (เท่าที่ฉันรู้บางทีผู้ใช้ / devs สามารถแสดงความคิดเห็น), Android, Blackberry และอื่น ๆ ) โดย UA อื่น ๆ

ในกรณีที่ผู้คนพบคำถามนี้ใน Google สิ่งที่คุณต้องทำคือปฏิบัติกับหมายเลขโทรศัพท์เป็นลิงก์เนื่องจาก Apple จะตั้งเป็นหนึ่งโดยอัตโนมัติ

HTML ของคุณ

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

CSS ของคุณ

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

เนื่องจากเราใช้ลิงก์: โทรศัพท์ในเว็บไซต์ที่มีไอคอนโทรศัพท์อยู่: ก่อนที่โซลูชันส่วนใหญ่ที่โพสต์ที่นี่จะแนะนำปัญหาอื่น

ฉันใช้เมตาแท็ก:

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

สิ่งนี้รวมกับการระบุtel: linksทั่วทั้งไซต์ที่ควรจะเชื่อมโยง!

การใช้ css นั้นไม่ใช่ตัวเลือกจริงๆเพราะมันซ่อนลิงค์โทรศัพท์ที่เกี่ยวข้อง

เคล็ดลับง่าย ๆ สำหรับฉันแล้วเพิ่มวัตถุที่ซ่อนอยู่ตรงกลางหมายเลขโทรศัพท์

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

วิธีนี้จะช่วยคุณแทนที่สีหมายเลขโทรศัพท์สำหรับ IOS

คำถามเก่า แต่เนื่องจากไม่มีคำตอบข้างต้นดีสำหรับฉันฉันโพสต์ว่าฉันแก้ไขมันได้อย่างไร

ฉันมีหมายเลขโทรศัพท์ในรายการ:

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

CSS:

.phone_menu{
  color:orange;
}

แต่บน iPad / iPhone มันเป็นสีดำดังนั้นฉันเพิ่งเพิ่มมันลงใน css:

.phone_menu a{
  color:orange;
}

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

ตามที่ Beau Smith จากหัวข้อนี้: ฉันจะลบรูปแบบสีน้ำเงินของหมายเลขโทรศัพท์ใน iPhone / iOS ได้อย่างไร

คุณควรใช้ "โทร:" ในแอตทริบิวต์ href ของลิงก์เช่นนี้:

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

มันจะลบลักษณะเพิ่มเติมและ DOM ไปยังสตริงหมายเลขโทรศัพท์

ฉันกลับไปกลับมาระหว่าง

1

    <a href="tel:5551231234">

2

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

พยายามทำให้รหัสเดียวกันใช้งานได้กับเดสก์ท็อปและ iPhone ปัญหาคือว่าถ้ามีการใช้ตัวเลือกแรกและคุณคลิกจากเบราว์เซอร์บนเดสก์ท็อปมันจะแสดงข้อความแสดงข้อผิดพลาดและหากใช้ตัวเลือกที่สองมันจะปิดการใช้งานฟังก์ชั่นการโทรผ่านแท็บบน iPhone iOS5

ดังนั้นฉันจึงลองและลองและมันกลับกลายเป็นว่า iPhone ถือว่าหมายเลขโทรศัพท์เป็นลิงก์ชนิดพิเศษที่สามารถจัดรูปแบบด้วย CSS เป็นหนึ่งเดียว ฉันห่อหมายเลขในแท็กที่อยู่ (มันจะทำงานกับแท็ก HTML อื่น ๆ เพียงลองหลีกเลี่ยง<a>แท็ก) และจัดรูปแบบใน CSS เป็น

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

และมันใช้งานได้ - ในเบราว์เซอร์เดสก์ท็อปแสดงข้อความธรรมดาและใน Safari mobile แสดงว่าเป็นลิงค์ที่มีหน้าต่างการโทร / ยกเลิกปรากฏขึ้นบนแท็บโดยไม่มีสีน้ำเงินและการขีดเส้นใต้เริ่มต้น

เพียงระมัดระวังกฎ css ที่ใช้กับหมายเลขโดยเฉพาะอย่างยิ่งเมื่อใช้การขยาย / เว้นขอบ

<meta name="format-detection" content="telephone=no">ไม่จำเป็นต้องเอาการตรวจสอบรูปแบบโดยใช้ ลองใช้หมายเลขโทรศัพท์ในแท็กใดก็ได้จากนั้นยึดแท็กและจัดรูปแบบตามลำดับเช่นspan { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. เมตาแท็กนี้ทำงานในเบราว์เซอร์ Safari เริ่มต้นบนอุปกรณ์ iOS และจะใช้ได้กับหมายเลขโทรศัพท์ที่ไม่ได้รวมอยู่ในลิงก์โทรศัพท์เท่านั้น

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

บรรทัดแรกจะไม่ได้รับการจัดรูปแบบเป็นลิงก์หากคุณระบุเมตาแท็ก แต่บรรทัดที่สองจะเป็นเพราะมันอยู่ในที่ยึดโทรศัพท์

คุณสามารถนำเมตาแท็กมารวมกันและใช้มิกซ์อินเช่น

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

เพื่อรักษาสไตล์ของหมายเลขโทรศัพท์ของคุณไว้ แต่คุณต้องแน่ใจว่าคุณใส่มันไว้ในที่ยึดโทรศัพท์

หากคุณต้องการระมัดระวังเป็นพิเศษและป้องกันเหตุการณ์หมายเลขโทรศัพท์ที่มีรูปแบบไม่ถูกต้องด้วยแท็กจุดยึดคุณสามารถเจาะผ่าน DOM และปรับด้วยสคริปต์นี้ ปรับรูปแบบการเปลี่ยนตามที่ต้องการ

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

หรือดีกว่าโดยไม่ต้อง 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>');

หากคุณไม่ต้องการมีหมายเลขโทรศัพท์ใด ๆ บนหน้าเว็บของคุณก็ <meta name="format-detection" content="telephone=no"> จะทำงานได้ดี แต่การพูดแบบวาทศิลป์จะเกิดอะไรขึ้นถ้าคุณตั้งใจจะใช้หมายเลขโทรศัพท์และหมายเลขที่ไม่ใช่โทรศัพท์แบบผสม

สมมติว่าคุณเป็นเพียงรหัสที่เข้ารหัสยากใน HTML ของคุณการแฮ็ก "แทรกข้อมูลที่อยู่ตรงกลางของตัวเลข" จะใช้งานได้ แต่มันมีประโยชน์น้อยมากสำหรับหน้าแบบไดนามิกเช่นการใช้ PHP เพื่อส่งออกข้อมูลตัวเลขจากแบบสอบถาม

ตัวอย่างเช่นฉันสร้างรายชื่อประชากรในเมือง ประชากรบางส่วนมีขนาดใหญ่พอที่จะทำให้ Mobile Safari เปลี่ยนเป็นลิงก์หมายเลขโทรศัพท์ โชคดีที่ฉันต้องทำคือใช้ PHP number_format()รอบ ๆ อาร์เรย์เอาต์พุตเพื่อแทรกเครื่องหมายจุลภาค "thousand":

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

การจัดรูปแบบนี้เพียงพอที่จะโน้มน้าวใจ Mobile Safari ว่ามีจุดประสงค์ที่เฉพาะเจาะจงมากกว่าสำหรับหมายเลขดังนั้นมันจึงไม่ได้เริ่มต้นหมายเลขที่ใหญ่กว่าของฉันลงในลิงก์โทรศัพท์อีกต่อไป เช่นเดียวกันจะถือเป็นจริงสำหรับคำแนะนำโดย @davidcondrey การใช้<a href="tel:18001234567">1-800-123-4567</a>เพื่อระบุวัตถุประสงค์ให้กับหมายเลข

บรรทัดล่างคือ Safari มือถือที่เห็นได้ชัดว่าให้ความสนใจกับความหมาย เนื่องจาก HTML5 นั้นสร้างขึ้นรอบ ๆ มาร์กอัปความหมายและเครื่องมือค้นหาใช้มาร์กอัปความหมายฉันตั้งใจจะใช้ให้มากที่สุดเท่าที่จะทำได้

การใส่หมายเลขใน <fieldset> จะป้องกันไม่ให้ iOS แปลงหมายเลขนั้นเป็นลิงก์ด้วยเหตุผลบางประการ ในบางกรณีนี่อาจเป็นทางออกที่ถูกต้อง ฉันไม่สนับสนุนการปิดการใช้งานการแปลงเป็นลิงก์

iOS ทำให้หมายเลขโทรศัพท์สามารถคลิกได้โดยค่าเริ่มต้น (สำหรับเหตุผลที่ชัดเจน) แน่นอนว่าจะเพิ่มแท็กพิเศษซึ่งเอาชนะสไตล์ของคุณหากหมายเลขโทรศัพท์ของคุณยังไม่ได้เชื่อมโยง

หากต้องการแก้ไขให้ลองเพิ่มลงในสไตล์ชีทของคุณ: a[href^=tel] { color: inherit; text-decoration: none; }

ซึ่งควรเก็บหมายเลขโทรศัพท์ของคุณไว้ตามที่คุณคาดหวัง

ลองใช้การใส่อักขระ ASCII สำหรับเส้นประระหว่างการคั่นหลัก

จากนี้: -

สำหรับสิ่งนี้: –

เช่นเปลี่ยน555-555-5555=>555–555–5555

สิ่งนี้ทำเพื่อฉัน:

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

คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่นี่

ใน Joomla Yootheme ใช้งานได้สำหรับฉัน:

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

แอตทริบิวต์ x-ms-format-detection = "none" นี้จัดการโทรศัพท์รูปแบบ

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>

หากคุณต้องการหลีกเลี่ยงหมายเลขโทรศัพท์ที่เป็นลิงก์ให้ลองใช้แท็กแบบอักษร:

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