使用jquery获取浏览器视口的高度和宽度而不使用滚动条？

Question

如何使用jQuery获取没有滚动条的浏览器视口的高度和宽度？

这是我到目前为止所尝试的:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

此解决方案不考虑浏览器滚动条.

Answer 1

$(window).height();
$(window).width();

更多信息

• http://api.jquery.com/height/
• http://api.jquery.com/width/

但是,使用jQuery对于获取这些值并不重要.使用

document.documentElement.clientHeight;
document.documentElement.clientWidth;

获取不包括滚动条的大小,或

window.innerHeight;
window.innerWidth;

获取整个视口,包括滚动条.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

Answer 2

不要使用jQuery,只需使用javascript获得正确的结果:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

注意:这包括滚动条宽度/高度.

Answer 3

这是一个通用的JS,应该适用于大多数浏览器(FF,Cr,IE6 +):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Answer 4

你正在使用错误的方法调用.视口是在文档上打开的"窗口":您可以看到多少内容和位置.

使用$(window).height()不会给你视口大小它会给你整个窗口的大小,这通常是整个文档的大小,虽然文档可能更大.

要获得实际视口的大小,请使用window.innerHeight和window.innerWidth.

https://gist.github.com/bohman/1351439

不要使用jQuery方法,例如$(window).innerHeight(),因为这些方法给出了错误的数字.他们给你窗户的高度,而不是innerHeight.

Answer 5

描述

以下内容将为您提供浏览器视口的大小.

样品

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

更多信息

• jQuery.height()
• jQUery.width()

Answer 6

正如Kyle建议的那样,您可以测量客户端浏览器视口大小,而无需考虑滚动条的大小.

示例(视口尺寸没有滚动条)

// 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');

或者,如果您希望在考虑滚动条的大小的同时找到客户端视口的尺寸,那么此示例最适合您.

首先不要忘记将身体标签设置为100%宽度和高度,以确保测量准确.

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.
}

示例(带滚动条的视口尺寸)

// 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');