Chúng tôi có một câu hỏi được đưa ra vào ngày hôm trước trên ShopTalk về các liên kết neo thông thường trên iOS và một số tình huống kỳ lạ khi bạn không thể chỉ nhấn vào chúng một lần để truy cập liên kết, mà phải nhấn liên kết hai lần. Bản thân tôi đã trải qua điều này và khá bối rối.
Ban đầu, tôi dự đoán nó liên quan đến javascrip nhưng thực ra không phải. Đây là một vấn đề do hiệu ứng :hover trên css gây ra cho các thiết bị cảm ứng. Mặc dù vậy, chúng ta lại ko gặp phải vấn đề này trên các thiết bị android.
Cách xóa bỏ hoặc bỏ qua hiệu ứng :hover trên các thiết bị cảm ứng
Bạn có thể loại bỏ tất cả các quy tắc CSS có :hoversử dụng Javascript. Điều này có ưu điểm là không phải đụng đến CSS và tương thích ngay cả với các trình duyệt cũ hơn.
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
Chúc bạn thành công!