Phát hiện xem trình duyệt có hỗ trợ vị trí không:

Question

Có phương pháp đáng tin cậy nào để phát hiện xem trình duyệt có hỗ trợ position fixed không?

Tôi đã tìm thấy một số giải pháp nhưng không có giải pháp nào có vẻ hoạt động tốt trên tất cả các trình duyệt.

Answer 1

Trong khi phát triển một ứng dụng di động với jQuery Mobile, tôi cũng gặp phải vấn đề tương tự. Các tiêu đề nên đã cố định vị trí (nếu được hỗ trợ bởi trình duyệt) và các giải pháp là để thiết lập các tiêu đề với một mặc định position: fixed trên css và kiểm tra tài sản được hỗ trợ thông qua các phương pháp sau đây:

function isPositionFixedSupported() { 
    return $('[data-role="header"]').css('position') === 'fixed'; 
} 

các giá trị trả về là static nếu không được trình duyệt hỗ trợ.

Answer 2

Mã này hoạt động hoàn toàn tốt. Chỉ cần thử nghiệm nó trên một hộp Windows ME với IE6, trả về 'null' vì IE6 không hỗ trợ position:fixed;.

nhân tiện, đây KHÔNG phải là mã của tôi ban đầu. TẤT CẢ các khoản tín dụng truy cập vàoKangax's Githubcó nhiều chức năng ở đó để kiểm tra các tính năng của trình duyệt.

function() { 
    var container = document.body; 
    if (document.createElement && 
    container && container.appendChild && container.removeChild) { 
    var el = document.createElement("div"); 
    if (!el.getBoundingClientRect) { 
     return null; 
    } 
    el.innerHTML = "x"; 
    el.style.cssText = "position:fixed;top:100px;"; 
    container.appendChild(el); 
    var originalHeight = container.style.height, originalScrollTop = container.scrollTop; 
    container.style.height = "3000px"; 
    container.scrollTop = 500; 
    var elementTop = el.getBoundingClientRect().top; 
    container.style.height = originalHeight; 
    var isSupported = elementTop === 100; 
    container.removeChild(el); 
    container.scrollTop = originalScrollTop; 
    return isSupported; 
    } 
    return null; 
} 

Nếu nó chạy, nó hoạt động, nếu không, bạn sẽ bị vô hiệu.

Answer 3

Mã của Ohgodwhy là chính xác, nhưng đối với iOS, bạn có thể kiểm tra tác nhân người dùng và xem đó có phải là Safari của iOS hay không. Sau đó, trả lại rằng nó được hỗ trợ. Các chuỗi tác nhân người dùng là

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 
Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7 

Tôi không chắc chắn cách mã này, nhưng tôi chắc chắn đây là những gì bạn cần làm để phát hiện iOS.

Answer 4

Ứng dụng này có hoạt động trên trình duyệt di động không?

function isFixedPositionSupported() { 
    var e = document.createElement('div') 
    try { 
     e.style.position = 'fixed' 
     return e.style.position == 'fixed' 
    } catch (exception) { 
     return false 
    } 
} 

Answer 5

var supportFixed = (function() { 
    var elem = document.createElement('div'); 
    elem.style.cssText = 'position:fixed'; 
    if (elem.style.position.match('fixed')) return true; 
    return false; 
}());