调整窗口大小时获取文档的大小答案

【问题标题】：Get the size of a document when window resize调整窗口大小时获取文档的大小
【发布时间】：2013-02-22 13:44:03
【问题描述】：

当我调整窗口大小时，我可以找到窗口的大小。像这样

<script type="text/javascript">

    jQuery(window).resize(function () {
      var width = jQuery(window).width();
      var height = jQuery(window).height();
      console.log(width);
      console.log(height);
    })
</script>

现在我想在调整窗口大小时获取文档大小。每次调整窗口大小时如何获取大小。

【问题讨论】：

这是this?的重复问题

标签： jquery html

【解决方案1】：

不确定你是否想要这个：

jQuery(window).resize(function () {
   var winwidth = jQuery(window).width();
   var winheight = jQuery(window).height();
   var docwidth = jQuery(document).width();
   var docheight = jQuery(document).height();
   console.log('window width is -> ' + winwidth + 'window height is -> ' + winheight);
   console.log('document width is -> ' + docwidth + 'document height is -> ' + docheight);
}).resize();
//-^^^^^^^^----this will log everytime on doc ready

【讨论】：

【解决方案2】：

您可以使用document 对象：

var width = jQuery(document).width();
var height = jQuery(document).height();

演示：http://jsfiddle.net/wyHwp/

如您所见，文档的大小是相同的值，而窗口较小。当窗口变得比文档需要的大时，文档将拉伸到窗口的大小。

还可以获取document.body元素的大小：

var width = jQuery(document.body).width();
var height = jQuery(document.body).height();

不同之处在于，即使窗口更高，您也会获得 body 元素的高度，即 body 元素不会自动拉伸到窗口底部。

【讨论】：

【解决方案3】：

修改您的示例代码以同时获取它。

<script type="text/javascript">

    jQuery(window).resize(function () {
      var width = jQuery(window).width();
      var height = jQuery(window).height();
      var documentWidth = jQuery(document).width();
      var documentHeight = jQuery(document).height();
      console.log(width);
      console.log(height);
    })
</script>

【讨论】：

【解决方案4】：

$(窗口).width(); // 返回浏览器视口的宽度

$(document).width(); // 返回 HTML 文档的宽度

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

【讨论】：

我知道 $(document).width() 和 $(document).height() 给出了 HTML 文档的宽度和高度，但是当窗口调整大小时，有没有办法调整html 文档。
使用percentage 或em 声明内容的宽度，网站将缩放到窗口宽度。