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

Question

我有一个页面的总体布局如下：

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

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

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

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

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

Is it possible to set a minimum viewport height?

html

css

jquery

viewport