Web アプリを強制的にランドスケープ モードで実行するにはどうすればよいですか?

Web アプリケーションでランドスケープ モードを強制する方法

モバイル デバイスにはさまざまな方向に適応する固有の柔軟性があるにもかかわらず、場合によっては、特定のアプリケーションを特定の向きに制限します。アプリケーションに「ランドスケープ」モードを強制する方法は次のとおりです。

1.デバイスの向きの検出

以前は、Web アプリケーションの向きをロックすることはできませんでした。ただし、CSS3 メディア クエリを使用すると、開発者はデバイスの向きを検出し、それに応じてさまざまな CSS スタイルを適用できます:

@media screen and (orientation:portrait) {
    /* Portrait mode styles */
}

@media screen and (orientation:landscape) {
    /* Landscape mode styles */
}

または、JavaScript を使用:

document.addEventListener("orientationchange", (e) => {
    if (window.orientation === 0 || window.orientation === 180) {
        /* Portrait mode */
    } else {
        /* Landscape mode */
    }
});

2. HTML5 Web アプリ マニフェスト

2014 年 11 月 12 日の時点で、HTML5 Web アプリ マニフェストは方向モードを強制する手段を提供します。 manifest.json ファイルには、以下を含めることができます:

{
    "display": "landscape",
    "orientation": "landscape",
    ...
}

次に、HTML ファイルにマニフェストを含めます:

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

Web アプリ マニフェストの方向ロックのサポートに注意してください。機能はブラウザによって異なる場合があります。 Chrome がこの機能を提供することが確認されています。

以上がWeb アプリを強制的にランドスケープ モードで実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。