So erkennen Sie den Landscape-Modus und verstecken HTML-Inhalt mit CSS, Abfragen oder JS

Question

In meiner Responsive-Website möchte ich die Art, wie die Website in mobilen Geräten angezeigt wird, und verbieten Anzeige von Querformat.

Ich suchte durch die Stackoverflow-Site und fand die Möglichkeit, eine Warnmeldung zu setzen.

Ich habe versucht, die CSS-Code unten, aber es hat nicht funktioniert. Hast du irgendwelche Vorschläge?

@media screen and (max-width: 980px) and (orientation:portrait){ 
    #warning-message { 
     display:none; 
    } 
} 

@media screen and (max-width: 980px) and (orientation:landscape){ 
    .content { 
     display:none; 
    } 
    .mobile { 
     display:none; 
    } 
    #warning-message { 
     display:block; 
    } 
} 

Answer 1

Die ‚Orientierung‘ Medien-Funktion ist ‚Portrait‘, wenn der Wert der ‚Höhe‘ Medien-Funktion größer oder gleich den Wert der ‚width‘ Medien-Funktion. Ansonsten ist "Orientierung" "Landschaft".

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

Quelle: https://www.w3.org/TR/css3-mediaqueries/#orientation