302

Làm cách nào để sử dụng jQuery để xác định kích thước của khung nhìn trình duyệt và để phát hiện lại điều này nếu trang bị thay đổi kích thước? Tôi cần tạo kích thước IFRAME vào không gian này (xuất hiện một chút trên mỗi lề).

Đối với những người không biết, chế độ xem trình duyệt không phải là kích thước của tài liệu / trang. Đây là kích thước hiển thị của cửa sổ của bạn trước khi cuộn.

|
476

Để có được chiều rộng và chiều cao của khung nhìn:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

thay đổi kích thước sự kiện của trang:

$(window).resize(function() {

});
|
  • 1

    Tôi đã thử nghiệm điều này trên Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375,70, Opera 10.53 và Safari 5.0 (7533.16). Điều này hoạt động nhất quán trên tất cả những điều này. Tôi cũng đã thử nghiệm FF3.6.3 trên Ubuntu và nó cũng hoạt động ở đó. Tôi nghĩ rằng tôi đang sử dụng jQuery 1.3 với WordPress 2.9.2, đây là nơi tôi cần nó để hoạt động.

    – Hoàng Thu Vọng 03:57:10 16/06/2010
  • 1

    Bất kỳ ý tưởng làm thế nào để có được khu vực hiển thị trên màn hình thiết bị, không chỉ những gì nó có thể cuộn đến? Tôi thấy $ (window) .height () trả về toàn bộ chiều rộng của tài liệu, không phải phần được phóng to. Tôi muốn biết mức độ hiển thị sau khi thu phóng được áp dụng.

    – Tạ Xuân Liễu 02:38:23 20/11/2011
  • 1

    Trên thực tế, innerWidth/ innerHeightlà chính xác hơn để sử dụng (bao gồm thu phóng).

    – Dương Vân Chi 21:03:35 16/01/2013
  • 1

    @FrankSchwieterman Có thể trình duyệt của bạn không hoạt động theo cách bạn muốn: có thể bạn đang gặp phải vấn đề này: stackoverflow.com/q/12103208/923560 . Hãy chắc chắn rằng tập tin HTML của bạn bao gồm một hợp DOCTYPEkhai, ví dụ <!DOCTYPE html>.

    – Hoàng Anh Bông 14:59:14 15/02/2013
  • 1

    Điều này là hoàn toàn sai. Điều này cung cấp cho bạn kích thước của tài liệu, không phải khung nhìn (kích thước của cửa sổ trên tài liệu).

    – Tạ Trọng Nhân 05:43:06 30/11/2014
39

Bạn có thể thử các đơn vị khung nhìn (CSS3):

div { 
  height: 95vh; 
  width: 95vw; 
}

Hỗ trợ trình duyệt

|
25

1. Trả lời cho câu hỏi chính

Kịch bản $(window).height()hoạt động tốt (hiển thị chiều cao của khung nhìn chứ không phải tài liệu có chiều cao cuộn), NHƯNG nó cần bạn đặt chính xác thẻ doctype trong tài liệu của bạn, ví dụ như các loại tài liệu này:

Đối với HTML 5:

<!DOCTYPE html>

Đối với HTML4 chuyển tiếp:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Có lẽ loại tài liệu mặc định được giả định bởi một số trình duyệt là như vậy, $(window).height()lấy chiều cao của tài liệu chứ không phải chiều cao của trình duyệt. Với đặc tả doctype, nó đã được giải quyết thỏa đáng và tôi khá chắc chắn rằng bạn sẽ tránh được "thay đổi cuộn tràn sang ẩn rồi quay lại", đó là, tôi xin lỗi, một mẹo nhỏ bẩn thỉu, đặc biệt nếu bạn không ' Tài liệu về mã cho việc sử dụng lập trình viên trong tương lai.

2. Một mẹo BỔ SUNG, lưu ý sang một bên: Hơn nữa, nếu bạn đang thực hiện một tập lệnh, bạn có thể phát minh ra các bài kiểm tra để giúp các lập trình viên sử dụng các thư viện của bạn, hãy để tôi phát minh ra một vài:

$ (tài liệu). yet (function () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      } 

});


EDIT: về phần 2, "Một mẹo THÊM, hãy bỏ qua một bên": @Machiel, trong nhận xét của ngày hôm qua (2014-09-04), đã đúng rồi: việc kiểm tra $ không thể nằm trong sự kiện sẵn sàng của Jquery, bởi vì như chúng tôi đã chỉ ra, giả sử $ đã được định nghĩa. CẢM ƠN ĐÃ ĐIỂM R OUT RÀNG, và xin vui lòng những độc giả còn lại sửa lỗi này, nếu bạn đã sử dụng nó trong các tập lệnh của mình. Đề xuất của tôi là: trong các thư viện của bạn, hãy đặt hàm "install_script ()" để khởi tạo thư viện (đặt bất kỳ tham chiếu nào đến $ bên trong hàm init đó, bao gồm khai báo ready ()) và AT BEGINNING của hàm "install_script ()" như vậy , kiểm tra xem $ có được xác định không, nhưng làm cho mọi thứ độc lập với JQuery, để thư viện của bạn có thể "tự chẩn đoán" khi JQuery chưa được xác định. Tôi thích phương thức này hơn là bắt buộc tạo JQuery tự động mang nó từ CDN. Đó là những ghi chú nhỏ dành cho việc giúp đỡ các lập trình viên khác. Tôi nghĩ rằng những người làm thư viện phải giàu có hơn trong phản hồi về những sai lầm của lập trình viên tiềm năng. Ví dụ: Google Apis cần một hướng dẫn dành riêng để hiểu các thông báo lỗi. Điều đó thật vô lý, cần tài liệu bên ngoài cho một số lỗi nhỏ không cần bạn đi và tìm kiếm một hướng dẫn hoặc thông số kỹ thuật. Thư viện phải được TỰ TIN. Tôi viết mã thậm chí quan tâm đến những sai lầm mà tôi có thể phạm phải kể cả sáu tháng kể từ bây giờ và nó vẫn cố gắng trở thành một mã sạch và không lặp lại, đã được viết để ngăn chặn các lỗi của nhà phát triển trong tương lai. Tôi nghĩ rằng những người làm thư viện phải giàu có hơn trong phản hồi về những sai lầm của lập trình viên tiềm năng. Ví dụ: Google Apis cần một hướng dẫn dành riêng để hiểu các thông báo lỗi. Điều đó thật vô lý, cần tài liệu bên ngoài cho một số lỗi nhỏ không cần bạn đi và tìm kiếm một hướng dẫn hoặc thông số kỹ thuật. Thư viện phải được TỰ TIN. Tôi viết mã thậm chí quan tâm đến những sai lầm mà tôi có thể phạm phải kể cả sáu tháng kể từ bây giờ và nó vẫn cố gắng trở thành một mã sạch và không lặp lại, đã được viết để ngăn chặn các lỗi của nhà phát triển trong tương lai. Tôi nghĩ rằng những người làm thư viện phải giàu có hơn trong phản hồi về những sai lầm của lập trình viên tiềm năng. Ví dụ: Google Apis cần một hướng dẫn dành riêng để hiểu các thông báo lỗi. Điều đó thật vô lý, cần tài liệu bên ngoài cho một số lỗi nhỏ không cần bạn đi và tìm kiếm một hướng dẫn hoặc thông số kỹ thuật. Thư viện phải được TỰ TIN. Tôi viết mã thậm chí quan tâm đến những sai lầm mà tôi có thể phạm phải kể cả sáu tháng kể từ bây giờ và nó vẫn cố gắng trở thành một mã sạch và không lặp lại, đã được viết để ngăn chặn các lỗi của nhà phát triển trong tương lai. Không cần bạn phải đi và tìm kiếm một hướng dẫn hoặc một đặc điểm kỹ thuật. Thư viện phải được TỰ TIN. Tôi viết mã thậm chí quan tâm đến những sai lầm mà tôi có thể phạm phải kể cả sáu tháng kể từ bây giờ và nó vẫn cố gắng trở thành một mã sạch và không lặp lại, đã được viết để ngăn chặn các lỗi của nhà phát triển trong tương lai. Không cần bạn phải đi và tìm kiếm một hướng dẫn hoặc một đặc điểm kỹ thuật. Thư viện phải được TỰ TIN. Tôi viết mã thậm chí quan tâm đến những sai lầm mà tôi có thể phạm phải kể cả sáu tháng kể từ bây giờ và nó vẫn cố gắng trở thành một mã sạch và không lặp lại, đã được viết để ngăn chặn các lỗi của nhà phát triển trong tương lai.

|
  • 1

    Rất khó để đọc bài viết của bạn. Vui lòng làm lại bài đăng của bạn để bạn quen với StackExchange Markdown như mọi người khác. một lý do tại sao các trang web StackExchange không sử dụng TinyMCE , nhưng nếu bạn có hiểu biết về nó, hãy tham gia vào Meta .

    – Hoàng Thu Vọng 13:58:15 12/03/2014
  • 1

    Có một điều hơi lạ khi bạn kiểm tra tính khả dụng $sau khi bạn đã sử dụng $để gọi $(document).ready(function() { } );. Thật tốt nếu bạn kiểm tra xem jQuery có sẵn không, nhưng tại thời điểm này thì đã quá muộn.

    – Tạ Xuân Liễu 17:20:55 03/09/2014
  • 1

    @Machiel, bạn đúng QUYỀN. May mắn là tôi vừa đi kiểm tra kịch bản của mình, và họ không sử dụng sự kiện đã sẵn sàng. Vâng, cảm ơn, tôi cảm thấy ngu ngốc khi bạn nói điều này, nhưng may mắn là tôi vừa kiểm tra rằng trong các tập lệnh của mình, việc kiểm tra nằm trong một hàm gọi là "install_this_script ()", và trong cài đặt như vậy, tôi gọi hàm init của thư viện, nhưng trước đó, tôi kiểm tra (OUTSIDE JQUERY) nếu đối tượng $ được xác định hay không. CẢM ƠN MỌI NGƯỜI, anh bạn, tôi thực sự làm tôi hoảng sợ! Tôi sợ bài đăng này ở đây quá lâu, tôi hy vọng lỗi này đã không gây hại nhiều cho những độc giả khác. Tôi sửa bài.

    – Dương Vân Chi 17:30:13 05/09/2014
  • 1

    Đây nên là câu trả lời thực sự! Cảm ơn!

    – Hoàng Anh Bông 22:24:22 08/01/2016
5

Bạn có thể sử dụng $ (window) .resize () để phát hiện xem khung nhìn có bị thay đổi kích thước không.

jQuery không có bất kỳ chức năng nào để phát hiện nhất quán chiều rộng và chiều cao chính xác của khung nhìn [1] khi có thanh cuộn.

Tôi tìm thấy một giải pháp sử dụng thư viện Modernizr và cụ thể là hàm mq mở các truy vấn phương tiện cho javascript.

Đây là giải pháp của tôi:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

Câu trả lời của tôi có thể sẽ không giúp thay đổi kích thước iframe thành chiều rộng khung nhìn 100% với lề ở mỗi bên, nhưng tôi hy vọng nó sẽ mang lại niềm an ủi cho các nhà phát triển web thất vọng với tính toán chiều rộng và chiều cao của chế độ xem javascript.

Có lẽ điều này có thể giúp liên quan đến iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Bạn có thể sử dụng $ (window). Thong () và $ (window) .height () để lấy số sẽ chính xác trong một số trình duyệt, nhưng không chính xác ở những trình duyệt khác. Trong các trình duyệt đó, bạn có thể thử sử dụng window.innerWidth và window.innerHeight để có chiều rộng và chiều cao chính xác, nhưng tôi sẽ khuyên bạn nên chống lại phương pháp này vì nó sẽ dựa vào tác nhân đánh hơi tác nhân.

Thông thường các trình duyệt khác nhau không nhất quán về việc chúng có bao gồm thanh cuộn như một phần của chiều rộng và chiều cao của cửa sổ hay không.

Lưu ý: Cả $ (window). Thong () và window.innerWidth khác nhau giữa các hệ điều hành sử dụng cùng một trình duyệt. Xem: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

|
2
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
|
  • 1

    Sử dụng $ (window) .height () sẽ không cung cấp cho bạn kích thước khung nhìn, nó sẽ cung cấp cho bạn kích thước của toàn bộ cửa sổ, thường là kích thước của toàn bộ tài liệu mặc dù tài liệu có thể còn lớn hơn.

    – Tạ Quế Anh 10:26:07 10/06/2016
  • 1

    tuyệt vời cho chiều rộng!

    – Dương Phú Bình 15:33:45 13/10/2016
1

Để có được kích thước của chế độ xem khi tảithay đổi kích thước (dựa trên phản hồi của SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
|
1

Xin lưu ý rằng các đơn vị chế độ xem CSS3 (vh, vw) sẽ không phát tốt trên iOS Khi bạn cuộn trang, kích thước chế độ xem được tính toán lại bằng cách nào đó và kích thước của phần tử sử dụng đơn vị chế độ xem cũng tăng. Vì vậy, thực sự một số javascript là bắt buộc.

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.