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

Get the height and width of the browser viewport without scrollbars using jquery?

提问by Yetimwork Beyene

How do I get the height and width of the browser viewport without scrollbars using jQuery?

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

Here is what I have tried so far:

这是我迄今为止尝试过的：

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

This solution does not take into account the browser scrollbars.

此解决方案未考虑浏览器滚动条。

回答by Kyle

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

More info

更多信息

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

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

Using jQuery is not essential for getting those values, however. Use

然而，使用 jQuery 并不是获取这些值的必要条件。用

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

to get sizes excluding scrollbars, or

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

window.innerHeight;
window.innerWidth;

to get the whole viewport, including scrollbars.

获取整个视口，包括滚动条。

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

回答by Sakata Gintoki

Don't use jQuery, just use javascript for correct result:

不要使用 jQuery，只需使用 javascript 以获得正确的结果：

This includes scrollbar width/height:

这包括滚动条宽度/高度：

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

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

This excludes scrollbar width/height:

这不包括滚动条宽度/高度：

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

回答by Vilmantas Baranauskas

Here is a generic JS which should work in most browsers (FF, Cr, IE6+):

这是一个可以在大多数浏览器（FF、Cr、IE6+）中工作的通用 JS：

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

回答by Mikbe

You're using the wrong method calls. A viewport is the "window" that's open on the document: how much of it you can see and where.

您使用了错误的方法调用。视口是在文档上打开的“窗口”：您可以看到多少以及在哪里。

Using $(window).height()will not give you the viewport size it will give you the size of the entire window, which is usually the size of the entire document though the document could be even larger.

使用$(window).height()不会给你视口大小，它会给你整个窗口的大小，通常是整个文档的大小，尽管文档可能更大。

To get the size of the actual viewport use window.innerHeightand window.innerWidth.

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

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

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

Do not use the jQuery methods, e.g. $(window).innerHeight(), as these give the wrong numbers. They give you the window's height, not innerHeight.

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

回答by dknaack

Description

描述

The following will give you the size of the browsers viewport.

以下将为您提供浏览器视口的大小。

Sample

样本

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

More Information

更多信息

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

• jQuery.height()
• jQUEry.width()

回答by Fábio Antunes

As Kyle suggested, you can measure the client browser viewport size without taking into account the size of the scroll bars this way.

正如 Kyle 建议的那样，您可以通过这种方式测量客户端浏览器视口大小，而无需考虑滚动条的大小。

Sample (Viewport dimensions WITHOUT scroll bars)

示例（没有滚动条的视口尺寸）

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

Alternatively if you wish to find the dimensions of the client viewport while taking into account the size of the scroll bars, then this sample bellow best suits you.

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

First don't forget to set you body tag to be 100% width and height just to make sure the measurement is accurate.

首先不要忘记将 body 标签设置为 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.
}

Sample (Viewport dimensions WITH scroll bars)

示例（带滚动条的视口尺寸）

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

回答by David L

The script $(window).height()does work well (showing the viewport's height and not the document with scrolling height), BUT it needs that you put correctly the doctype tag in your document, for example these doctypes:

该脚本运行$(window).height()良好（显示视口的高度而不是具有滚动高度的文档），但它需要您在文档中正确放置 doctype 标签，例如这些 doctypes：

For html5: <!doctype html>

对于 html5： <!doctype html>

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

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

Probably the default doctype assumed by some browsers is such, that $(window).height()takes the document's height and not the browser's height. With the doctype specification, it's satisfactorily solved, and I'm pretty sure you peps will avoid the "changing scroll-overflow to hidden and then back", which is, I'm sorry, a bit dirty trick, specially if you don't document it on the code for future programmer's usage.

可能某些浏览器假定的默认文档类型是这样的，即$(window).height()采用文档的高度而不是浏览器的高度。使用文档类型规范，它得到了令人满意的解决，我很确定你会避免“将滚动溢出更改为隐藏然后返回”，对不起，这是一个有点肮脏的技巧，特别是如果你不这样做' t 将其记录在代码中以供将来程序员使用。

Moreover, if you are doing a script, you can invent tests to help programmers in your libraries, let me invent a couple:

此外，如果你正在做一个脚本，你可以发明测试来帮助你的库中的程序员，让我发明几个：

$(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");
    } 
});

回答by Anamoul ROUF

$(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});

});

回答by hendrik de lange

I wanted a different look of my website for width screen and small screen. I have made 2 CSS files. In Java I choose which of the 2 CSS file is used depending on the screen width. I use the PHP function echowith in the echo-function some javascript.

我希望我的网站在宽屏和小屏上有不同的外观。我制作了 2 个 CSS 文件。在 Java 中，我根据屏幕宽度选择使用 2 个 CSS 文件中的哪一个。我echo在echo-function 中使用了一些 javascript的 PHP 函数。

my code in the <header>section of my PHP-file:

我<header>的 PHP 文件部分中的代码：

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>

回答by Husnain

Using jQuery ...

使用 jQuery ...

$(document).height() & $(window).height() will return the same values ... the key is to reset body's padding and margin so that you get no scrolling.

$(document).height() & $(window).height() 将返回相同的值......关键是重置正文的填充和边距，以便您不会滚动。

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

Hope this helps.

希望这可以帮助。