1

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

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

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

4

4 回答 4

1

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

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

@media all and (max-width:480px) {
    /* styles for when the window is less than or equal to 480px wide */
}
于 2013-02-16T19:11:33.003 回答
1 
var Height = $("html").height();
var Width = $("html").width();

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

于 2013-02-16T19:12:38.220 回答
0

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

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/

于 2013-02-16T19:16:50.583 回答
0

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

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

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

高度也是如此。

于 2013-02-16T19:19:39.547 回答