Web アプリで横向きを強制するにはどうすればよいですか?

アプリケーションに横向きの向きを強制する秘密を解き明かす

特定のアプリケーションが特定の向きモードを必要とすることは周知の事実です。アプリがポートレート モード向けにまったく設計されていない場合は、壁にぶつかっている可能性があります。横向きモードを強制する機能は長い間欠けていた機能ですが、心配する必要はありません!

元の解決策: 検出は限定的で制御なし

従来は、検出のみが可能でしたCSS3 メディア クエリまたは JavaScript イベントを使用して現在の方向を設定し、適切な CSS スタイルをトリガーします。これにより、向きの変更に対応できましたが、デバイスの自然な動作が依然として優先されていたため、特定の向きを強制できませんでした。

HTML5 Webapp Manifest to the Rescue

最後に、HTML5 Web アプリ マニフェストが解決策を提供します。 manifest.json ファイルの追加により、次のプロパティを設定できるようになりました:

• display: UI モード (スタンドアロン、フルスクリーン、ミニマル UI、またはブラウザー) を制御します
• 方向: 横向きまたは縦向きモード (横向きまたは縦向き) を強制します

これらの行をマニフェスト.json に含めて HTML ファイルにリンクすることで、最終的にアプリケーションの横向きを強制できます。

実装の詳細:

{
    "display": "fullscreen", /* Choose UI mode here */
    "orientation": "landscape"
}

<link rel="manifest" href="manifest.json">

サポートされているブラウザ:

現在、Chrome は Web アプリ マニフェストのサポートを提供しています。方向ロック機能。さらに情報が集まり次第、この記事も更新します。

以上がWeb アプリで横向きを強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。