jquery - 与视口大小相同的 Div 无法正确调整大小

Question

在初始页面加载时，我希望 div 占据视口空间（如本示例）。我正在使用以下代码：

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

它可以很好地拉伸 div，但问题是当我调整浏览器窗口的大小或在手机/平板电脑上从纵向变为横向时，div 保持相同的宽度和高度。我必须重新加载页面以使 div 适应新的视口大小。

我尝试查看示例站点的代码，但结果更加困惑。我还尝试了我在这里找到的其他一些建议，但到目前为止没有一个对我有用。

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

score 0 · Accepted Answer

我认为您应该使用CSS Media Queries或 jQuery mobile 的orientationchange事件来为您完成工作。

您可以使用orientationchangejQuery mobile 的插件，添加以下脚本：

  <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());
});

score 0 · Accepted Answer

谢谢你的建议。调查一下，这就是我最终要做的（并且有效）：

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;}

它对我有用。希望它可以帮助别人=）

2 回答 2