Hãy xem xét một chút về cách chúng tôi thường mã số liên kết số điện thoại để hoạt động khi chạm vào trình duyệt trên thiết bị di động:

HTML
<a href="tel:0987806670">0987 806 670</a> 

Trước đây, nếu chúng tôi không nghĩ rằng hiển thị số liên kết số điện thoại trên màn hình không phải của điện thoại di động, chúng tôi sẽ đánh dấu trang đó giống như văn bản thuần túy và sau đó hiển thị liên kết đó cho một màn hình di động. Nhưng giải pháp đó đi theo hướng dẫn trên. Ngoài ra, người đọc màn hình sẽ đọc số điện thoại dưới dạng một liên kết ngay cả khi nó không giống kiểu.

Một điều khác cần tránh là tạo ra hai yếu tố riêng biệt cho số điện thoại và sử dụng CSS có điều kiện để hiển thị một số thích hợp cho điện thoại di động hoặc máy tính để bàn. Nếu CSS bị vô hiệu trong trình duyệt, cả hai số điện thoại sẽ được hiển thị (có, mọi người đều vô hiệu hóa CSS).

"Được rồi, anh chàng, tôi gặp vấn đề. Những gì có thể được thực hiện?"

Thay đổi phần tử

Chúng ta có thể thay thế các phần tử trong DOM bằng JavaScript. Trong trường hợp này, nếu chúng ta tạo ra một <span>cho một số điện thoại, chúng ta có thể thay thế nó trong DOM bằng một <a>màn hình nhỏ hơn.

Vì vậy, cho:

HTML
<span id="num">0987 806 670</span> 

Chúng ta có thể thêm một ít jQuery để trộn và sử dụng replaceWith()phương pháp:

JavaScript
$("#num").replaceWith(function () { return $("<a href='tel:" + $(this).html() + "'>" + $(this).html() + "</a>"); }); 

(Bạn có thể làm điều tương tự bằng JavaScript đơn giản bằng cách sử dụng replaceChild()phương pháp.)

Bây giờ chúng ta cần một điều kiện để xác định khi nào để thay thế các phần tử. Vì chúng tôi thực hiện thay đổi này dựa trên kích thước màn hình, độ rộng màn hình 700px vì kích hoạt có thể cung cấp cho chúng tôi sự linh hoạt lớn nhất trên các thiết bị. ( Nó không phải là hoàn hảo , nhưng không ai nói xây dựng web là dễ dàng.)

JavaScript
if ($(window).width() <= 700) { $("#num").replaceWith(function () { return $("<a href='tel:" + $(this).html() + "'>" + $(this).html() + "</a>"); }); }

Bây giờ chúng ta có một giải pháp có thể truy cập và chức năng khi thích hợp. Đối với tôi điều này có ý nghĩa, mặc dù tôi đã nghe thấy những lo ngại về các tính năng VoIP phá hoại này với màn hình không dùng điện thoại di động. Nếu bạn muốn cải thiện theo phương pháp này hoặc có một giải pháp cho kịch bản này, tôi rất muốn xem những gì bạn đưa ra.