Question

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

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

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

Answer 1

听起来你真正需要做的就是听取窗口的resize事件并根据需要重新排列内容。

或者，以现代方式进行并使用CSS Media Queries：

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

Answer 2

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

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

Answer 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/

Answer 4

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

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

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

同样的高度。

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

4 个答案: