CSSとJavaScriptを使用してデバイスの向きをロックする方法

1. CSSのみを使用する方法: CSSの@mediaルールを使用して、デバイスの向きに応じてスタイルを適用し、デバイスの回転を防止します。

   @media (orientation: portrait) {
    body {
      transform: rotate(0deg);
      overflow: hidden;
    }
   }

   @media (orientation: landscape) {
    body {
      transform: rotate(90deg);
      overflow: hidden;
    }
   }

   上記のコードでは、縦向きの場合にはデバイスを回転させず、横向きの場合には90度回転させます。

2. JavaScriptを使用する方法: JavaScriptを使ってデバイスの向きを検出し、必要な場合には回転をロックします。以下に、JavaScriptを使用した例を示します。

   function lockOrientation() {
    if (screen.orientation) {
      screen.orientation.lock("portrait").catch(function() {
        // ロックに失敗した場合の処理
      });
    } else if (screen.mozOrientation) {
      screen.mozOrientation.lock("portrait").catch(function() {
        // ロックに失敗した場合の処理
      });
    } else if (screen.msOrientation) {
      screen.msOrientation.lock("portrait").catch(function() {
        // ロックに失敗した場合の処理
      });
    } else {
      window.addEventListener("orientationchange", function() {
        if (window.orientation !== 0) {
          window.orientation = 0;
        }
      });
    }
   }
   // ページの読み込み時にデバイスの向きをロックする
   window.addEventListener("DOMContentLoaded", lockOrientation);

   上記のコードでは、lockOrientation関数を使用してデバイスの向きをロックし、DOMContentLoadedイベントでページの読み込み時に実行します。

これらはデバイスの向きをロックするためのいくつかの一般的な方法です。必要に応じて、上記のコードをカスタマイズして、特定の要件に合わせて調整してください。