Question

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

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

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

我试着查看示例网站的代码，但最后我更加困惑。我还尝试了其他一些我在这里找到的建议，但到目前为止我都没有。

如果有人能帮助我，我会很感激。

Answer 1

我认为您应该使用 CSS媒体查询或jQuery mobile的orientationchange事件来为您完成工作。

您可以使用orientationchange使用jQuery 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());
});

Answer 2

感谢您的建议。调查一下这就是我最终做的事情（并且有效）：

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

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