tôi biết rằng bạn có $ (cửa sổ) .width() có thể nhận được kích thước của trình duyệt web.tự động phát hiện thay đổi chiều rộng cửa sổ trình duyệt web?
tôi muốn phát hiện khi người dùng thay đổi kích thước trình duyệt web của mình để tôi có thể điều chỉnh chiều rộng cột. là có một cách để tự động phát hiện này hoặc làm tôi phải sử dụng setTimeinterval để vòng lặp và xem nếu nó đã thay đổi?
Thử resize event
$(window).resize(function() {
console.log('window was resized');
});
Các sự kiện JavaScript được đặt tên window.onresize.
Các JQuery binding là named .resize()
Something để keep trong mind- trong IE, at least, resize events bubble, và positioned elements và các document body can fire independent resize events.
Ngoài ra, IE sẽ phát một luồng liên tục 'thay đổi kích thước' sự kiện khi cửa sổ hoặc phần tử được thay đổi kích thước bằng cách kéo. Các trình duyệt khác chờ chuột để kích hoạt.
IE là trình phát đủ lớn, hữu ích khi có trình xử lý trung gian cho phép các trường thay đổi kích thước sự kiện ngay cả khi bạn chỉ phân nhánh các ứng dụng khách IE.
Trình xử lý tức thì đặt thời gian chờ ngắn (100-200 msec) trước khi gọi trình xử lý thay đổi kích thước 'thực'. Nếu cùng một chức năng được gọi lại trước khi hết thời gian chờ, đó là sự kiện bubblng hoặc cửa sổ đang được kéo đến kích thước mới, vì vậy hãy xóa hết thời gian chờ và đặt lại.
Trong MDN họ cung cấp cho một mã Javascript độc lập thực sự tốt:
window.onresize = resize;
function resize()
{
alert("resize event detected!");
}Nếu bạn chỉ cần loại chức năng tôi muốn giới thiệu để đi cho nó.
Tôi sử dụng phương tiện = "chỉ màn hình và (min-width: 750px)" href = "... css tệp cho cửa sổ rộng" media = "only screen and (max-width: 751px)" href = "... css cho điện thoại di động"
Khi tôi di chuyển khung cửa sổ bên phải sang trái và phải để tăng và giảm kích thước cửa sổ, trình duyệt web của tôi sẽ tự động chuyển từ cửa sổ rộng sang thiết bị di động. Tôi không phải bao gồm bất kỳ mã Javascript nào để phát hiện chiều rộng cửa sổ. Tính năng này hoạt động với Chrome, Firefox và Internet Explorer trên cả máy tính chạy Windows và Macintosh.
Viết này xuống bởi anh biết bằng cách nào đó không ai trong số những câu trả lời cho hiện đại nhất thực hành cách để làm điều này:
window.addEventListener("resize", function(event) {
console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
Bạn có thể muốn sử dụng debounce: https://davidwalsh.name/javascript-debounce-function
Nếu không
window.addEventListener("resize")
Sẽ kích hoạt toàn bộ thời gian khi đang thay đổi kích thước cửa sổ. Điều này sẽ đánh thuế cho CPU của bạn.
Điều này cũng được kích hoạt bằng cách thu phóng trình duyệt trên điện thoại di động, sẽ có một nếu có để kiểm tra kích thước theo cách thủ công so với giá trị trước đó. – Hoffmann
Nhưng điều này không hoàn toàn là những gì được hỏi (hoặc những gì tôi đang tìm kiếm). Nếu, ví dụ: bạn tải xuống tệp bằng chrome thì thanh "tải xuống" ở cuối trang xuất hiện, thay đổi chiều cao trình duyệt của bạn và kích hoạt chính xác sự kiện thay đổi kích thước. Đó không phải là một sự thay đổi chiều rộng, vì vậy bạn có được một sự kiện mà bạn cần phải lọc ra (đó là những gì tôi đang tìm kiếm ...) – philw