So ermitteln Sie mithilfe von CSS- und JS-Mobilterminals den Status des horizontalen bzw. vertikalen Bildschirms des Mobiltelefons

In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS- und JS-Mobilterminals den Status des horizontalen bzw. vertikalen Bildschirms des Mobiltelefons ermitteln. Ich hoffe, dass er allen helfen kann .

Deaktivieren Sie die automatische Zoomfunktion des Benutzers:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Es gibt zwei Möglichkeiten, den horizontalen und vertikalen Bildschirmstatus zu beurteilen: CSS-Beurteilung, JS-Beurteilung

(1 ), CSS zur Beurteilung des horizontalen Bildschirms oder des vertikalen Bildschirms?

1 Schreiben Sie in dieselbe CSS-Datei

@media screen and (orientation: portrait) {  /*竖屏 css*/} 
@media screen and (orientation: landscape) {  /*横屏 css*/}

Wenn Sie die Größe entsprechend dem horizontalen und vertikalen Bildschirm festlegen, schreiben Sie einfach die normale Seite Wählen Sie die Größe wie gewohnt aus und stellen Sie den horizontalen Bildschirmstil separat ein. Das heißt, Sie müssen nur den horizontalen Bildschirmstil basierend auf dem ursprünglichen Stil hinzufügen,

@media screen and (orientation: landscape) {
  /*横屏 css*/}
当用户横屏时加载横屏样式，竖屏时取消横屏样式即加载默认样式。

2. Schreiben Sie ihn separat in zwei CSS und verweisen Sie entsprechend den horizontalen und vertikalen Bildschirmen auf unterschiedliche Stildateien:

Referenz entsprechend den horizontalen und vertikalen Bildschirmen Verschiedene Stildateien

Horizontaler Bildschirm:

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Vertikaler Bildschirm:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

Hinweis: css bestimmt dass horizontale und vertikale Bildschirme jederzeit nahtlos verbunden werden können, das heißt, der horizontale Bildschirm lädt den horizontalen Bildschirmstil, der vertikale Bildschirm lädt den vertikalen Bildschirmstil,

(2) js bestimmt, ob der horizontale Bildschirm oder Der vertikale Bildschirm

//判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {        if (window.orientation === 180 || window.orientation === 0) { 
            console.log("竖屏");
            $(".codeIg_s").removeClass('vercreen');//取消横屏样式        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            console.log("横屏");
            $(".codeIg_s").addClass('vercreen');//添加横屏样式        }  
    }, false);

Hinweis: Der horizontale Bildschirmstil ist in vercreen. Ändern Sie den ursprünglichen Standardstil unter dem Klassennamen und er kann normal verwendet werden. Der Nachteil ist, dass er verwendet werden muss wird beim Wechsel zwischen horizontalen und vertikalen Bildschirmen ausgelöst.

Wenn der Benutzer standardmäßig den horizontalen Bildschirmstatus verwendet, wird die bedingte Beurteilung des horizontalen Bildschirms nicht ausgelöst. Die entsprechende bedingte Beurteilung wird nur ausgelöst, wenn der Benutzer von Querformat zu Hochformat oder von Hochformat zu Querformat wechselt .

Wenn kein Schaltzustand vorliegt, wird keine bedingte Beurteilung durchgeführt. Dies ist nicht so umfassend wie die CSS-Beurteilung von horizontalen und vertikalen Bildschirmen.

Verwandte Empfehlungen:

So verwenden Sie CSS, um einen Schaltflächentext-Gleiteffekt zu erzielen

Über den CSS3-Close-Code des jQuery-Browsers- Up-Kompatibilität Einführung

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie mithilfe von CSS- und JS-Mobilterminals den Status des horizontalen bzw. vertikalen Bildschirms des Mobiltelefons. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!