sử dụng modernizr để phát hiện vh, vw với calc

Question

Vì vậy, tôi đã gặp phải sự cố khi trình duyệt tương thích với đơn vị vh, vw và tương thích với calc(), NHƯNG không tương thích với đơn vị vh, vw trong calc. Vì vậy, tôi không chắc chắn làm thế nào để sử dụng modernizr để kiểm tra cho trường hợp cụ thể đó.

Bất kỳ ý tưởng nào về điều này? Cám ơn rất nhiều!

Answer 1

Bạn có thể thêm một bài kiểm tra tùy chỉnh trong Modernizr để kiểm tra này dành cho bạn:

Modernizr.addTest('calcviewportunits', function(){ 
    var computedHeight, 
     div = document.createElement('div'); 

    div.style.height = 'calc(10vh + 10vw)'; 
    document.body.appendChild(div); 
    computedHeight = window.getComputedStyle(div).height; 
    document.body.removeChild(div); 

    return computedHeight !== "0px"; 
}); 

Thử nghiệm trên Chrome 26 (trả về false) và 41 (trả về true). Tôi không chắc chắn trình duyệt chính xác làm gì và không hỗ trợ điều này nhưng bạn chỉ có thể chạy fiddle sau để kiểm tra: http://jsfiddle.net/3dthsgv5/6/

Điều này không kiểm tra chỉ calc() mặc dù, tôi thấy tốt hơn để tách mối quan tâm. Một kiểm tra riêng biệt cho hỗ trợ calc() đã có trong Modernizr (không phải trong cấu hình mặc định) và có thể được tìm thấy tại đây: How can I check if CSS calc() is available using JavaScript?

Cũng có thể đáng chú ý là các đơn vị xem không phải là widely supported. Các trường hợp cả hai đơn vị calc và khung nhìn được hỗ trợ nhưng không kết hợp là rất hiếm.