获取浏览器视图的高度和宽度，而不使用jQuery的滚动条？
如何获得浏览器视口的高度和宽度，而不使用jQuery的滚动条？
这是我迄今为止所尝试的：
var viewportWidth = $("body").innerWidth(); var viewportHeight = $("body").innerHeight(); 此解决scheme不考虑浏览器滚动条。
$(window).height(); $(window).width();
更多信息
然而，使用jQuery对于获取这些值并不重要。 使用
document.body.clientHeight; document.body.clientWidth;
获取不包含滚动条的大小，或
window.innerHeight; window.innerWidth;
获取整个视口，包括滚动条。
document.body.clientHeight <= window.innerHeight; // is always true
这是一个通用的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; }
不要使用jQuery，只需使用javascript来获得正确的结果：
var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);
你正在使用错误的方法调用。 视口是文档上打开的“窗口”：您可以看到多less，以及在哪里。
使用$(window).height()不会给你视口的大小，它会给你整个窗口的大小，这通常是整个文档的大小，尽pipe文档可能更大。
要获得实际视口的大小，请使用window.innerHeight和window.innerWidth 。
https://gist.github.com/bohman/1351439
不要使用jQuery方法，例如$(window).innerHeight() ，因为这些提供了错误的数字。 他们给你的窗户的高度，而不是innerHeight 。
描述
以下将给你浏览器视口的大小。
样品
$(window).height(); // returns height of browser viewport $(window).width(); // returns width of browser viewport
更多信息
- jQuery.height（）
- jQUery.width（）
正如Kyle所build议的那样，您可以通过这种方式来衡量客户端浏览器的视口大小，而无需考虑滚动条的大小。
示例（不带滚动条的视口尺寸）
// 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');
或者，如果您希望在考虑滚动条大小的同时查找客户端视口的尺寸，那么此示例波纹pipe最适合您。
首先不要忘记将身体标记设置为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');
脚本$(window).height()可以很好地工作（显示视口的高度，而不是滚动高度的文档），但是它需要你在文档中正确地放置doctype标签，例如这些文档types：
对于html5： <!doctype html>
过渡html4： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可能某些浏览器默认的文档types是这样的， $(window).height()取文档的高度而不是浏览器的高度。 使用doctype规范，它是令人满意的解决，我敢肯定你peps将避免“改变滚动溢出隐藏然后回来”，这是，对不起，有点肮脏的把戏，特别是如果你不'将其logging在未来程序员使用的代码上。
而且，如果你正在做一个脚本，你可以发明一些testing来帮助你的程序员，让我发明一对：
$(document).ready(function() { if(typeof $=='undefined') { alert("Error, you haven't called 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"); } });
$(document).ready(function() { //calculate the window height & add css properties for height 100% wh = $( window ).height(); ww = $( window ).width(); $(".targeted-div").css({"height": wh, "width": ww}); });
使用jQuery …
$（document）.height（）＆$（window）.height（）将返回相同的值…关键是重置主体的填充和边距，这样就不会滚动。
<!-- body { padding: 0px; margin: 0px; position: relative; } -->
希望这可以帮助。
