是否可以设置最小视口高度

Question

我的页面总体布局如下：

＆＃13;

＆＃13;

header {height: 10vh; width:100%; background-color:black;}
#wrapper {height:70vh; width: 100%; background-color: white; }
footer {height:20vh; width: 100%; background-color: grey;}

＆＃13;

<header>
</header>
<div id="wrapper">
image 
</div>
<footer>
</footer>

＆＃13;

＆＃13;

＆＃13;

这在移动设备上看起来很好，直到屏幕方向变为水平。是否可以设置miniumu视口高度？我正在使用

<meta name="viewport" content="width=device-width, initial-scale=1">

并尝试了这个

<meta name="viewport" content="width=device-width, initial-scale=1, min-height=500">

没有运气。是否有CSS或jQuery方法？

Answer 1

您可以对max-height使用媒体查询，也可以与orientation: landscape结合使用，并为这些元素添加单独的高度设置（即必要的最低高度），例如

@media screen and (max-height: 600px) {
  header {height: 100px;}
  #wrapper {height:700px; }
  footer {height:200px;}
}