有没有办法在 JavaScript / Jquery 中获取完整窗口的实际大小？答案

【问题标题】：Is There Any Way To Get The Actual Size Of Full Window In JavaScript / Jquery?有没有办法在 JavaScript / Jquery 中获取完整窗口的实际大小？
【发布时间】：2013-02-16 19:09:36
【问题描述】：

我正在尝试为我的网站制作流畅的布局，但问题是如果在页面加载之前将窗口的大小重新调整为小，然后他们最大化他们的窗口，那么页面是小尺寸的，我的问题即使页面很小，我也将如何获得完整大小的窗口的宽度和高度。

$(document).ready(function()
{
    var Height = $(document).height();
var Width = $(document).width();
});

这给了我窗口的高度和宽度，即使窗口很小，我也想要最大化的大小。

【问题讨论】：

即使有媒体查询？
我已经选择了另一种选择，只需为我的大多数元素设置一个最小宽度，这意味着我的问题已经消失了，我的问题是元素相互碰撞，因为窗口太小了。跨度>

标签： javascript jquery html css liquid-layout

【解决方案1】：

听起来您实际上需要做的是监听窗口的resize 事件并根据需要重新排列内容。

或者，使用现代方式并使用 CSS 媒体查询：

@media all and (max-width:480px) {
    /* styles for when the window is less than or equal to 480px wide */
}

【讨论】：

【解决方案2】：

var Height = $("html").height();
var Width = $("html").width();

您也可以尝试body，它甚至可能取决于浏览器。我相信一些特殊定位的元素可能会延伸到身体之外。

【讨论】：

【解决方案3】：

这是一个如何监听窗口调整大小事件的示例：

HTML：

<body>
    <p>Resize result window to see updated dimensions</p>
    Dimensions: <div id="debug"></div>
</body>

JavaScript：

function updateSize() {
    var $win = $(window);
    $('#debug').html($win.height() + ' x ' + $win.width());
}

$(window).resize(updateSize); // listen for window resize
$(updateSize); // call on page load to get initial size

在 jsFiddle 上试试： http://jsfiddle.net/TKAFc/

【讨论】：

【解决方案4】：

如果你需要屏幕尺寸，你应该使用screen.width和screen.height。

你可以减去“窗口边框”，这样你就有了有用的区域：

screen.width - (window.outerWidth - window.innerWidth)

高度也一样。

【讨论】：

当我提醒我得到“NaN”时
我用两个T写了outer。现已更正。