与视口大小相同的div无法正确调整大小

初始页面加载时我希望div占据视口空间（如this example）。我使用下面的代码：与视口大小相同的div无法正确调整大小

$("#intro").height($(window).height()); 
$(window).resize(function(){ 
    $("#intro").height($(window).height()); 
});

它横跨在div就好了，但问题是，DIV保持不变，宽度和高度，当我调整浏览器窗口，或者从纵向到横向移动/片剂。我必须重新加载页面才能使div调整到新的视口大小。

我试图查看示例网站的代码，但我最终更困惑。我还尝试了其他一些我在这里找到的建议，但目前为止还没有一个适用于我。

如果有人能帮助我，我将不胜感激。

2013-04-21 brunn

看看窗口上的调整大小事件，使用它来调整div的大小 – box86rowh 2013-04-21 11:56:41

感谢您的建议。寻找到它，这是我落得这样做（和它的作品）：

HTML

<body id="container"> 
    <div id="intro"> 
     Content that will occupy the whole viewport 
    </div> 
</body>

CSS

#container {height: 100%;} 
#container #intro {height: 100%;} 
#intro {width: 100%;overflow: hidden;}

而且它为我工作。希望它可以帮助别人=）

2013-04-21 23:51:11 brunn

我认为你应该使用CSS媒体查询或jQuery手机的orientationchange事件，将为你做的工作。

您可以使用orientationchange与使用jQuery移动的插件，添加如下脚本：

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> 
    </script>

并更新到该脚本：

$(window).on('resize, orientationchange', function(){ 
    $("#intro").height($(window).height()); 
});

2013-04-21 04:58:15 Jai

回答