モバイル サイト エクスペリエンスの向上: 横向きの強制と自動回転の無効化

モバイルの応答性を考慮してデザインする場合、特定の向きがユーザーに大きな影響を与える可能性があります経験。この質問では、モバイル Web サイトを横向きに制限し、自動回転を無効にする解決策を求めています。

CSS ソリューション

これを実現する 1 つの方法は、CSS メディア クエリを使用することです。横向きと縦向きに個別のスタイルシートを作成すると、デバイスの向きに応じてサイトの動作を制御できます。実装方法は次のとおりです。

1. 2 つのスタイルシートを作成します。横向きの style_l.css と縦向きの style_p.css です。
2. style_l.css に、表示される横向き固有のスタイルを含めます。サイトのコンテンツを全幅で表示します。
3. style_p.css ですべての要素を非表示にし、ユーザーにデバイスを傾けるよう指示するメッセージを表示します。最適な表示のために。
4. メディア クエリを使用するには、次のコードを HTML ヘッド セクションに追加します。

jQuery ソリューション

jQuery を使用して、デバイスの向きを検出し、それに応じてサイトの機能を変更することもできます。以下に例を示します。

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

どちらのソリューションも効果的に横向きのみの向きを強制し、モバイル サイトでの自動回転を無効にし、意図した向きで最適なコンテンツ表示を保証することでユーザー エクスペリエンスを向上させます。