Ist es möglich, eine minimale Darstellungshöhe einstellen

Question

Ich habe eine Seite, die wie so eine allgemeine Layout hat:

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>

und diese auf mobilen Geräten gut aussieht, bis die Bildschirmausrichtung geändert wird zu horizontal. Ist es möglich, eine Miniumu-Ansichtsfensterhöhe festzulegen? Ich verwende

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

und versucht, diese

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

ohne Glück. Gibt es dafür eine CSS- oder jQuery-Methode?

Answer 1

Sie eine Medien-Abfrage für einen max-height verwenden könnte, vielleicht auch mit orientation: landscape kombiniert und dort für diese Elemente separate Höheneinstellungen setzen (dh die erforderlichen Mindesthöhen), wie

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