uniappは横画面を禁止しています

要約: この記事では主に、水平画面によるレイアウトの混乱やユーザー エクスペリエンスの低下を防ぐために、uniapp アプリケーションで水平画面を無効にする方法を紹介します。

モバイル アプリケーション開発では、横画面モードと縦画面モードの両方が非常に重要なレイアウト方法です。ランドスケープ モードでは、アプリケーションが水平方向により多くのスペースを占めることができ、情報表示の効率が向上します。ただし、ランドスケープ モードに依存しすぎると、アプリケーション全体のレイアウトが混乱し、ユーザー エクスペリエンスに影響を及ぼします。したがって、ユーザーエクスペリエンスを重視する一部のアプリケーションでは、横画面を禁止することが非常に必要です。

uniapp アプリケーションでは、CSS スタイルと JS コードの 2 つの方法で水平画面を無効にできます。

CSS スタイル メソッド

次のコードをアプリケーション スタイル ファイルに追加すると、水平画面を無効にできます。

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

このコードの機能は、画面を回転させることです。水平 画面モードでは、ページを 90 度回転して縦モードに保ちます。ただし、この方法ではユーザーによる画面の回転を完全に禁止することはできず、システム設定で自動回転機能をオンにすることで画面の回転を実現できます。

JS コードによる方法

アプリケーションの Vue ファイル内で JS コードを使用して横画面モードと縦画面モードを制御することで、アプリケーションの横画面機能を完全に無効にすることができます。具体的な実装方法は次のとおりです:

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)
  }
}

このコードの機能は、アプリケーションが DOM にマウントされた後にウィンドウ イベントを初期化することです。画面が横向きモードに回転されると、画面が強制的に回転されます。縦向きモードに戻り、「このアプリは横向きをサポートしていません。縦向きを使用してください。」というプロンプトがユーザーに表示されます。なお、JSメソッドでは横画面を完全に禁止できるため、横画面表示が必要なアプリケーションでは横画面でプロンプトボックスを表示し、画面を回転して閲覧するよう促すなど、アプリケーションによっては特殊な処理が必要となる場合があります。

以上がuniappは横画面を禁止していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。