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

97

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

到目前为止，这是我尝试过的：

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

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

jquery

— Yetimwork Beyene
source

如何在没有（减号）滚动条的情况下获取屏幕宽度的

— mrbengi '16

160

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

更多信息

但是，使用jQuery对于获取这些值并不是必不可少的。用

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

获取除滚动条之外的大小，或者

window.innerHeight;
window.innerWidth;

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

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

— 凯尔
source

谢谢Kyle，它不包括浏览器滚动条，对吗？

— Yetimwork Beyene 2012年

根据我的了解，浏览器的“视口”是可以查看的，并且由于滚动条上没有内容，因此我认为这不是计算的一部分。但是，这可能会根据浏览器作者的实现方式而改变。

— 凯尔

4

视口并不意味着站点窗口的整个宽度/高度，而只是视口，使用诸如``window.innerHeight;之类的东西。window.innerWidth;`

— acidjazz

@Kyle您完全正确，如此处所述：w3schools.com/css/css_rwd_viewport.asp 视口是用户在网页上的可见区域。

— 布拉德·亚当斯

1

浏览器窗口视口的高度（以像素为单位），包括水平滚动条（如果已渲染）。。来源：developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

— marson parulian

36

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

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

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

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

展开摘要

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

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

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

展开摘要

— 酒田银时
source

谢谢，jQuery innerWidth和innerHeight方法确实返回了错误的结果。

— jck

console.log（window.innerHeight）; console.log（document.body.clientHeight）; console.log（$（window）.height（））; 最后不正确。您的解决方案最适合我。谢谢。

— 阿里

25

这是一个通用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;
}

— Vilmantas Baranauskas
source

这只对我有用。窗口。高度给了我无法计算的东西。

— 阿米特·库玛·古普塔

11

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

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

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

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

不要使用jQuery方法，例如$(window).innerHeight()，因为它们给出的数字错误。它们不给您窗口的高度innerHeight。

— 米克比
source

9

当窗口具有滚动条（由浏览器添加）时，window.innerWidth返回视口的宽度+滚动条的宽度。在这种情况下我该怎么办？

— 维克多

8

描述

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

样品

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

更多信息

— 德纳克
source

5

正如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');

另外，如果您希望在考虑滚动条尺寸的同时找到客户端视口的尺寸，则此波纹管示例最适合您。

首先，不要忘记将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.
}

样本（带滚动条的视口尺寸）

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

— 法比奥·安特尼斯（FábioAntunes）
source

4

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

对于html5： <!doctype html>

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

某些浏览器假定的默认doctype可能是这样，它$(window).height()采用文档的高度而不是浏览器的高度。使用doctype规范，可以令人满意地解决该问题，并且我敢肯定，您会避免使用“将滚动溢出更改为隐藏然后再返回”的方法，这很抱歉，这是一个肮脏的把戏，特别是如果您不这样做，将其记录在代码上，以备将来程序员使用。

此外，如果您正在编写脚本，则可以发明测试以帮助您的库中的程序员，让我发明一些：

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

— 大卫·L
source

3

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

});

— Anamoul ROUF
source

0

使用jQuery ...

$（document）.height（）和$（window）.height（）将返回相同的值...关键是重置正文的填充和边距，使您不会滚动。

<!--

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

-->

希望这可以帮助。

— 侯赛因
source

0

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

我<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>
"; 
?>

— 亨德里克·德兰格
source