Question

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

这是我到目前为止所尝试的内容：

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

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

Answer 1

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

更多信息

然而，使用jQuery对于获取这些值并不重要。使用

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

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

window.innerHeight;
window.innerWidth;

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

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

Answer 2

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

＆＃13;

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

＆＃13;

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

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

您正在使用错误的方法调用。视口是＆＃34;窗口＆＃34;在文档上打开：你可以看到多少内容以及在哪里。

使用$(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

更多信息

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

Answer 7

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

对于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">

某些浏览器假设的默认doctype可能是这样的，$(window).height()取得文档的高度而不是浏览器的高度。有了doctype规范，它已经圆满解决了，我很确定你会避免“将滚动溢出更改为隐藏然后返回”，也就是说，对不起，有点肮脏的伎俩，特别是如果你不这样做t将其记录在代码上以供将来程序员使用。

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

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

Answer 8

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

});

Answer 9

使用jQuery ...

$（document）.height（）＆amp; $（window）.height（）将返回相同的值...键是重置body的填充和边距，这样就不会滚动。

<!--

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

-->

希望这有帮助。

Answer 10

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

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

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

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

10 个答案:

描述

示例

更多信息