Như Kyle đã đề xuất, bạn có thể đo kích thước cửa sổ xem của trình duyệt khách hàng mà không cần tính đến kích thước của các thanh cuộn theo cách này.
Mẫu (Kích thước khung nhìn KHÔNG CÓ thanh cuộn)
// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');
// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
Ngoài ra, nếu bạn muốn tìm kích thước của khung nhìn khách hàng trong khi tính đến kích thước của thanh cuộn, thì mẫu dưới đây phù hợp nhất với bạn.
Đầu tiên, đừng quên đặt thẻ body của bạn là 100% chiều rộng và chiều cao chỉ để đảm bảo số đo là chính xác.
body {
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}
Mẫu (Kích thước khung nhìn CÓ thanh cuộn)
// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');
// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');