Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten

//Ermitteln Sie die visuelle Ansichtsfenstergröße (einschließlich vertikaler Bildlaufleiste)
sei iw = window.innerWidth,
 ih = Fenster.innereHöhe;
console.log(iw, ih);

// Holen Sie sich die visuelle Ansichtsfenstergröße (die Größe des Inhaltsbereichs, einschließlich der Seitenleiste, des Fensterrahmens und der Ränder zum Ändern der Fenstergröße)
let ow = Fenster.äußereBreite,
 oh = Fenster.äußere Höhe;
console.log(au, oh);

// Holen Sie sich die ideale Ansichtsfenstergröße des Bildschirms, fester Wert (Bildschirmauflösungsgröße)
sei sw = Fenster.Bildschirm.Breite,
 sh = Fenster.Bildschirm.Höhe;
konsole.log(sw, sh);

//Größe des verfügbaren Browserfensters ermitteln (einschließlich Polsterung, jedoch ohne vertikale Bildlaufleisten, Rahmen und Ränder)
sei aw = window.screen.availWidth,
 ah = Fenster.Bildschirm.verfügbareHöhe;
Konsole.log(aw, ah);

// Einschließlich Polsterung, Bildlaufleisten, Rahmen und Ränder let dow = document.documentElement.offsetWidth,
 doh = Dokument.Dokumentelement.OffsetHeight;
Konsole.log(dow, doh);

// Die Mindestbreite und -höhe, die erforderlich ist, um den gesamten Inhalt in das Ansichtsfenster einzupassen, ohne Bildlaufleisten zu verwenden. let dsW = document.documentElement.scrollWidth,
 dsH = Dokument.Dokumentelement.Scrollhöhe;
Konsole.log(dsW, dsH);

// Schließt die Polsterung des Elements ein, aber keine Ränder, Ränder oder vertikalen Bildlaufleisten let cw = document.documentElement.clientWidth,
 ch = Dokument.Dokumentelement.Clienthöhe;
Konsole.log(cw, ch);

// window.orientation: Ruft die Bildschirmrotationsrichtung ab window.addEventListener('resize', () => {
 // Normale Ausrichtung oder Bildschirm um 180 Grad gedreht, wenn (window.orientation === 180 || window.orientation === 0) {
  console.log('vertikaler Bildschirm')
 }

 // Der Bildschirm dreht sich um 90 Grad im Uhrzeigersinn oder 90 Grad gegen den Uhrzeigersinn, wenn (window.orientation === 90 || window.orientation === -90) {
  console.log('horizontaler Bildschirm')
 }
});

/*CSS-Erkennung des horizontalen und vertikalen Bildschirms*/
@media screen und (Ausrichtung:Hochformat) {

 /* Vertikaler Bildschirm */
 #app {
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrund: rot;
 }
}

@media screen und (Ausrichtung:Querformat) {

 /* Horizontaler Bildschirm */
 #app {
  Breite: 50vw;
  Höhe: 100vh;
  Hintergrund: grün;
 }
}

<meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1,Minimalmaßstab=1,Maximalmaßstab=1,Benutzerskalierbar=nein" />

<meta name="Ansichtsfenster" content="Ansichtsfenster-fit=Abdeckung" />

/* Wenn wir die untere feste Navigationsleiste verwenden, müssen wir den Füllwert dafür festlegen: */
Körper {
 Polsterung unten: Konstante (Safe-Area-Inset-Bottom);
 Polsterung unten: Umgebung (Sicherheitsbereich, Einschub unten);
}