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

【问题标题】：Get the height and width of the browser viewport without scrollbars using jquery?使用jquery获取没有滚动条的浏览器视口的高度和宽度？
【发布时间】：2012-02-06 08:05:32
【问题描述】：

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

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

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

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

【问题讨论】：

How to get screen width without (minus) scrollbar?的可能重复

标签： jquery

【解决方案1】：

不要使用 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);

【讨论】：

谢谢，jQuery 的 innerWidth 和 innerHeight 方法确实返回了错误的结果。
console.log(window.innerHeight); console.log(document.body.clientHeight);控制台.log($(窗口).height());最后不正确。你的解决方案最适合我。谢谢。
这个问题是document.body.clientHeight返回的是整个页面的高度，而不是视口。

【解决方案2】：

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

更多信息

然而，使用 jQuery 并不是获取这些值所必需的。使用

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

获取不包括滚动条的尺寸，或

window.innerHeight;
window.innerWidth;

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

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

【讨论】：

谢谢凯尔，这不包括浏览器滚动条，对吧？
据我了解，浏览器的“视口”是可查看的，并且由于滚动条上不能包含内容，我认为这不是计算的一部分。但是，这可能会根据浏览器作者的实现方式而改变。
视口并不意味着站点窗口的整个宽度/高度，它只是视口，使用类似 ``` window.innerHeight; window.innerWidth;```
@Kyle 您完全正确，如下所述：w3schools.com/css/css_rwd_viewport.asp 视口是网页的用户可见区域。
浏览器窗口视口的高度（以像素为单位），包括水平滚动条（如果呈现）。。来源：developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

【解决方案3】：

我希望我的网站在宽屏和小屏上有不同的外观。我制作了 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>
"; 
?>

【讨论】：

【解决方案4】：

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

});

【讨论】：

【解决方案5】：

使用 jQuery ...

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

<!--

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

-->

希望这会有所帮助。

【讨论】：

【解决方案6】：

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

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

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

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

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

【讨论】：

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

【解决方案7】：

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

对于 html5：<!doctype html>

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

可能某些浏览器采用的默认文档类型是这样的，$(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");
    } 
});

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

这只对我有用。窗户。高度给出了一些我无法计算的东西。

【解决方案10】：

说明

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

样本

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