Vừa rồi vừa trải qua một dự án website lỗi dữ liệu html có một trang giới thiệu thông tin công ty bao gồm:
Tên công ty: Thiết kế web Panpic
Địa chỉ: 23/1 Mai Lao Bang
Số điện thoại: ….
Fax: ….
Mã số thuế: …
- Trên máy tính tất cả các trình duyệt Chrome, Firefox, Microsoft Edge đều hiển thị đầy đủ các trường thông tin Số điện thoại, Fax, Mã số thuế.
- Các trình duyệt website trên các điện thoại Android đều hiển thị đủ thông tin.
- Chrome trên iPhone hiển thị đủ thông tin.
- Nhưng trình duyệt Safari trên iPhone không hiểu sao nó không hiển thị thông tin các trường số như; Số điện thoại, Fax, Mã số thuế.
- Team đã mất rất nhiều thời gian đi tìm hiểu không rõ nguyên nhân từ đâu và cách khắc phục … hơi rối trí!
Team chia sẻ lại với anh em làm frontend hay backend về cách fix lỗi trình duyệt Safari trên iPhone không hiển thị các trường số như số điện thoại, fax, …vv
Cách khắc phục các trường – text có giá trị số như số phone, fax không hiển thị trên Safari của iPhone
Mình chia sẻ cách khắc phục để các bạn không phải mất nhiều thời gian:
Các bạn khai báo thẻ meta để báo cho Safari không tự động detect trường giá trị số như iPhone
<!-- Turn off telephone number detection. -->
<meta name = "format-detection" content = "telephone=no">Sau khi khai báo đoạn code html trên trong phần head nội dung các phần Số điện thoại, Fax, Mã số thuế đã hiển thị đầy đủ thông tin số điện thoại OK trên Safari của iPhone.
<!DOCTYPE html>
<html lang="vi">
<head>
<!-- Turn off telephone number detection. -->
<meta name = "format-detection" content = "telephone=no">
...
</head>
<body>
...
</body>
</html>Tham khảo thêm bài viết trên diễn đàn developer của Apple.
Chúc các bạn thành.
Nếu anh em có cách khắc phục nào khác xin chia sẻ bằng comment bên dưới để cùng lan tỏa kiến thức phát triển website.
nhantam
Lập trình web app tại Panpic
