Có cách nào để loại bỏ màu siêu liên kết màu xanh mặc định khỏi số điện thoại khi xem trên iPhone không? Giống như một thẻ Mobile Safari cụ thể hoặc CSS để thêm?

Tôi chỉ có cái này cho số:

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

Và không có siêu liên kết nhưng iPhone vẫn hiển thị số văn bản này dưới dạng siêu liên kết. Tôi có vấn đề kết xuất này trên một số trang web của mình nhưng không thể hiểu tại sao điều này xảy ra.

Tôi đã đọc bài viết này:

Số kết xuất HTML di động

Nhưng đó có phải là giải pháp duy nhất có thể?

Hai lựa chọn…

1. Đặt format-detectionthẻ meta.

Để xóa tất cả định dạng tự động cho các số điện thoại, hãy thêm phần này vào tài liệu headcủa bạn html:

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

Xem thêm Khóa thẻ Meta cụ thể của Apple .

Lưu ý: Nếu bạn có số điện thoại trên trang có các số này, bạn nên định dạng thủ công chúng dưới dạng liên kết:

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

2. Không thể đặt thẻ meta? Bạn muốn sử dụng css?

Hai csslựa chọn:

Tùy chọn 1 (tốt hơn cho các trang web)

Liên kết đích với hrefcác giá trị bắt đầu telbằng cách sử dụng bộ chọn thuộc tính css này:

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

Tùy chọn 2 (tốt hơn cho các mẫu email html)

Ngoài ra, bạn có thể khi bạn không thể đặt thẻ meta, chẳng hạn như trong email html, bọc số điện thoại trong thẻ liên kết / thẻ neo ( <a href=""></a>) và sau đó nhắm mục tiêu kiểu của chúng bằng cách sử dụng css tương tự như sau và điều chỉnh các thuộc tính cụ thể bạn cần đặt lại :

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

Nếu bạn muốn nhắm mục tiêu các liên kết cụ thể, hãy sử dụng các lớp trên các liên kết của bạn và sau đó cập nhật bộ chọn css ở trên a[x-apple-data-detectors].class-name.

Chỉ để giải thích về một đề nghị trước đó của David Thomas:

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

Thêm phần này vào css của bạn sẽ làm mất chức năng của số điện thoại nhưng xóa phần gạch chân và khớp với màu bạn đang sử dụng ban đầu.

Kỳ lạ là tôi có thể đăng câu trả lời của riêng mình nhưng tôi không thể trả lời cho người khác ..

Nếu bạn muốn giữ lại chức năng của số điện thoại, nhưng chỉ cần xóa phần gạch chân cho mục đích hiển thị, bạn có thể định kiểu liên kết như bất kỳ mục nào khác:

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

Tôi chưa thấy tài liệu đề xuất một lớp được áp dụng cho các liên kết số điện thoại, vì vậy bạn sẽ phải thêm các lớp / id vào các liên kết bạn muốn có một kiểu khác.

Ngoài ra, bạn có thể định kiểu liên kết bằng cách sử dụng:

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

Điều này được hiểu bởi iPhone và sẽ không được áp dụng (theo như tôi biết, có lẽ Android, Blackberry, v.v. người dùng / nhà phát triển có thể nhận xét) bởi bất kỳ UA nào khác.

Trong trường hợp mọi người tìm thấy câu hỏi này trên Google, tất cả những gì bạn cần làm là coi số điện thoại là một liên kết vì Apple sẽ tự động đặt nó làm một.

HTML của bạn

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

css của bạn

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

Vì chúng tôi sử dụng tel: liên kết trên một trang web có biểu tượng điện thoại trên: trước khi hầu hết các giải pháp được đăng ở đây giới thiệu một vấn đề khác.

Tôi đã sử dụng thẻ meta:

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

Điều này kết hợp với chỉ định tel: liên kết toàn trang web nơi cần liên kết!

Sử dụng css thực sự không phải là một lựa chọn vì nó ẩn các liên kết tel có liên quan.

Thủ thuật đơn giản làm việc cho tôi, thêm một đối tượng ẩn ở giữa số điện thoại.

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

Điều này sẽ giúp bạn ghi đè màu số điện thoại cho iOS.

Một câu hỏi cũ nhưng vì không có câu trả lời nào ở trên tốt cho tôi nên tôi đăng cách tôi giải quyết nó

Tôi có một số điện thoại trong một danh sách:

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

css:

.phone_menu{
  color:orange;
}

Nhưng trên iPad / iPhone thì nó màu đen, vì vậy tôi chỉ cần thêm nó vào css:

.phone_menu a{
  color:orange;
}

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

Theo Beau Smith từ chủ đề này: Làm cách nào để xóa kiểu dáng màu xanh của số điện thoại trên iPhone / iOS?

Bạn nên áp dụng "tel:" trong thuộc tính href của liên kết của bạn như thế này:

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

Nó sẽ xóa mọi kiểu bổ sung và DOM vào chuỗi số điện thoại.

Tôi đã đi qua lại giữa

1.

    <a href="tel:5551231234">

2.

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

Cố gắng làm cho cùng một mã hoạt động cho máy tính để bàn và iPhone. Vấn đề là nếu tùy chọn đầu tiên được sử dụng và bạn nhấp vào nó từ trình duyệt trên máy tính để bàn thì nó sẽ đưa ra thông báo lỗi và nếu tùy chọn thứ hai được sử dụng thì nó sẽ vô hiệu hóa chức năng gọi tab trên iPhone iOS5.

Vì vậy, tôi đã thử và thử và hóa ra iPhone coi số điện thoại là một loại liên kết đặc biệt có thể được định dạng bằng CSS như một. Tôi đã bọc số trong thẻ địa chỉ (nó sẽ hoạt động với bất kỳ thẻ HTML nào khác, chỉ cần thử tránh <a>thẻ) và tạo kiểu trong CSS là

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

và nó hoạt động - trong một trình duyệt máy tính để bàn hiển thị văn bản đơn giản và trong điện thoại di động Safari hiển thị dưới dạng liên kết với cửa sổ Gọi / Hủy bật lên trên tab và không có màu xanh lam và gạch chân mặc định.

Chỉ cần cẩn thận với các quy tắc css được áp dụng cho số đặc biệt là khi sử dụng phần đệm / lề.

Không cần phải loại bỏ phát hiện định dạng bằng cách sử dụng <meta name="format-detection" content="telephone=no">. Hãy thử sử dụng số điện thoại trong bất kỳ thẻ nào thay vì thẻ neo và tạo kiểu cho phù hợp, ví dụ:span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no">. Thẻ meta này hoạt động trong trình duyệt Safari mặc định trên thiết bị iOS và sẽ chỉ hoạt động đối với các số điện thoại không được bọc trong một liên kết điện thoại.

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

dòng đầu tiên sẽ không được định dạng dưới dạng liên kết nếu bạn chỉ định thẻ meta nhưng dòng thứ hai sẽ vì nó được bọc trong một neo điện thoại.

Bạn có thể từ bỏ các thẻ meta cùng nhau và sử dụng một mixin như

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

để duy trì kiểu dáng dự định của các số điện thoại của bạn, nhưng bạn phải chắc chắn rằng bạn bọc chúng trong một neo điện thoại.

Nếu bạn muốn thận trọng hơn và bảo vệ chống lại sự kiện số điện thoại không được định dạng chính xác bằng thẻ neo gói, bạn có thể truy cập DOM và điều chỉnh bằng tập lệnh này. Điều chỉnh mô hình thay thế theo ý muố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>'));

hoặc thậm chí tốt hơn khi không có 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>');

Nếu bạn không có ý định có bất kỳ số điện thoại nào trên trang của mình, thì nó <meta name="format-detection" content="telephone=no"> sẽ hoạt động tốt. Nhưng nói một cách khoa học, nếu bạn có ý định sử dụng kết hợp số điện thoại và số không điện thoại thì sao?

Giả sử bạn chỉ là những con số mã hóa cứng vào HTML của mình, các bản hack "chèn công cụ vào giữa các chữ số của bạn" sẽ hoạt động. Nhưng chúng ít được sử dụng cho các trang động, chẳng hạn như sử dụng PHP để xuất dữ liệu số từ một truy vấn.

Ví dụ, tôi đã tạo ra một danh sách các quần thể thành phố. Một số quần thể đủ lớn để khiến Mobile Safari biến chúng thành các liên kết số điện thoại. May mắn thay, tất cả những gì tôi phải làm là sử dụng PHP number_format()xung quanh đầu ra mảng để chèn "hàng ngàn" dấu phẩy:

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

Định dạng này đủ để thuyết phục Mobile Safari rằng có một mục đích cụ thể hơn cho số này, vì vậy nó không mặc định các số lớn hơn của tôi vào các liên kết điện thoại nữa. Điều tương tự cũng đúng với đề xuất của @davidcondrey về việc sử dụng <a href="tel:18001234567">1-800-123-4567</a>để chỉ định mục đích cho số.

Điểm mấu chốt là Safari Mobile rõ ràng không chú ý đến ngữ nghĩa. Cho rằng HTML5 được xây dựng xung quanh đánh dấu ngữ nghĩa và các công cụ tìm kiếm đang dựa vào đánh dấu ngữ nghĩa, tôi dự định sử dụng nó nhiều nhất có thể.

Đặt số vào <fieldset> sẽ ngăn iOS chuyển đổi số thành liên kết vì một số lý do. Trong một số trường hợp, đây có thể là giải pháp phù hợp. Tôi không ủng hộ việc vô hiệu hóa việc chuyển đổi thành các liên kết.

iOS làm cho số điện thoại có thể nhấp bằng cách mặc định (vì lý do rõ ràng). Tất nhiên, điều đó thêm một thẻ phụ ghi đè lên kiểu dáng của bạn nếu số điện thoại của bạn chưa phải là một liên kết.

Để khắc phục, hãy thử thêm phần này vào biểu định kiểu của bạn: a[href^=tel] { color: inherit; text-decoration: none; }

Điều đó sẽ giữ cho số điện thoại của bạn theo kiểu như bạn mong đợi mà không cần thêm đánh dấu.

Hãy thử sử dụng đặt ký tự ASCII cho dấu gạch ngang ở giữa các khoảng cách chữ số.

từ đây: -

đến đây: –

ví dụ: thay đổi 555-555-5555=>555–555–5555

Điều này đã làm điều đó cho tôi:

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

Bạn có thể tìm thêm thông tin ở đây .

Trong Joomla Yootheme hoạt động với tôi:

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

Thuộc tính x-ms-format-phát hiện = "none" này xử lý điện thoại định dạng.

https://msdn.microsoft.com/en-us/l Library / dn337007 (v = vs85) .aspx

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

Nếu bạn chỉ muốn tránh số điện thoại là liên kết, hãy thử sử dụng thẻ phông chữ:

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