是否可以設置一個最小視口高度

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>

，這看起來在移動設備上正常，直到屏幕方向改變水平。是否可以設置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;} 
}