Uniapp verbietet horizontale Bildschirme

Zusammenfassung: In diesem Artikel wird hauptsächlich erläutert, wie der horizontale Bildschirm in der Uniapp-Anwendung deaktiviert wird, um Layoutstörungen und eine Verschlechterung der Benutzererfahrung durch den horizontalen Bildschirm zu verhindern.

Bei der Entwicklung mobiler Anwendungen sind sowohl der horizontale Bildschirmmodus als auch der vertikale Bildschirmmodus sehr wichtige Layoutmethoden. Im Querformat können Anwendungen mehr Platz in horizontaler Richtung einnehmen und die Effizienz der Informationsanzeige verbessern. Wenn Sie sich jedoch zu sehr auf den Querformatmodus verlassen, führt dies zu Verwirrung im Gesamtlayout der Anwendung und beeinträchtigt somit das Benutzererlebnis. Daher ist es für einige Anwendungen, bei denen das Benutzererlebnis im Vordergrund steht, unbedingt erforderlich, den horizontalen Bildschirm zu verbieten.

In der Uniapp-Anwendung kann die Deaktivierung des horizontalen Bildschirms auf zwei Arten erreicht werden: CSS-Stil und JS-Code.

CSS-Stilmethode

Durch Hinzufügen des folgenden Codes zur Anwendungsstildatei können Sie den horizontalen Bildschirm deaktivieren:

@media screen and (orientation:landscape){
    html,body{
        transform: rotate(90deg);
        transform-origin: center center 0;
    }
}

Die Funktion dieses Codes besteht darin, die Seite um 90 Grad zu drehen, wenn der Bildschirm in den Querformatmodus gedreht wird Bildschirm im Hochformat. Es ist jedoch zu beachten, dass diese Methode dem Benutzer das Drehen des Bildschirms nicht vollständig verbieten kann. Der Benutzer kann dennoch eine Bildschirmdrehung erreichen, indem er die automatische Rotationsfunktion in den Systemeinstellungen aktiviert.

JS-Code-Methode

Durch die Verwendung von JS-Code in der Vue-Datei der Anwendung zur Steuerung der horizontalen und vertikalen Bildschirmmodi kann die horizontale Bildschirmfunktion der Anwendung vollständig deaktiviert werden. Die spezifische Implementierungsmethode lautet wie folgt:

mounted() {
  this.$nextTick(() => {
    this.initWindowEvent()
  })
},
methods: {
  initWindowEvent() {
    let $this = this
    window.addEventListener('resize', $this.restrictRotate)
    $this.restrictRotate()
  },
  restrictRotate() {
    let angle = window.orientation
    if (angle === 90 || angle === -90) {
      window.orientation = 0
      document.body.style.display = 'none'
      alert('该应用不支持横屏，请使用竖屏浏览')
    } else {
      document.body.style.display = 'block'
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.restrictRotate)
  }
}

Die Funktion dieses Codes besteht darin, das Fensterereignis zu initialisieren, nachdem die Anwendung im DOM bereitgestellt wurde. Wenn der Bildschirm in den Querformatmodus gedreht wird, wird der Bildschirm gezwungen, sich wieder in den Hochformatmodus zu drehen und fordert den Benutzer auf: „Diese Anwendung unterstützt keinen horizontalen Bildschirm. Bitte verwenden Sie zum Durchsuchen den vertikalen Bildschirm.“ Es ist zu beachten, dass einige Anwendungen möglicherweise eine spezielle Verarbeitung erfordern, da die JS-Methode den horizontalen Bildschirm vollständig verhindern kann. Beispielsweise können Anwendungen, die eine horizontale Bildschirmanzeige erfordern, im Querformat ein Eingabeaufforderungsfeld anzeigen, um den Benutzer zum Drehen des Bildschirms aufzufordern.

Das obige ist der detaillierte Inhalt vonUniapp verbietet horizontale Bildschirme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!