モバイル Web サイトで横向きを強制し、自動回転を無効にする方法

モバイル サイトで横向きを強制する

現代のモバイル中心の Web 開発時代では、すべてのデバイスのユーザー エクスペリエンスを最適化することが重要ですそして方向性。この質問では、モバイル サイトで自動回転を無効にし、横向きのみを強制する方法を検討します。

CSS ソリューション

1 つのアプローチは、メディア クエリを使用してテストすることです。デバイスの向き。縦向きのスタイルシートでは、すべてのコンテンツを非表示にし、アプリが横向きモードでのみ機能することを示すメッセージを表示できます。例:

<code class="css">@media screen and (orientation: portrait) {
  body {
    display: none;
  }

  .orientation-message {
    display: block;
    text-align: center;
    font-size: 2rem;
    margin-top: 100px;
  }
}</code>

jQuery ソリューション

また、jQuery を使用してデバイスの向きを確認し、それに応じてページ レイアウトを動的に調整することもできます。以下にサンプル スクリプトを示します。

<code class="javascript">$(function() {
  var orientation = window.orientation;

  if (orientation == 0 || orientation == 180) {
    // Landscape mode
    $('body').css('transform', 'rotate(0)');
  } else {
    // Portrait mode
    $('body').css('transform', 'rotate(-90deg)');
  }
});</code>

このスクリプトは、デバイスの現在の向きを示す window.orientation プロパティをチェックします。値 (横向きの場合は 0 または 180、縦向きの場合は 90 または -90) に基づいて、CSS 変換を使用してページのコンテンツを回転します。

選択する具体的なソリューションは、設定とターゲット デバイスの機能によって異なります。 。 CSS と jQuery の両方のアプローチは、モバイル サイトで横向きを強制し、自動回転を無効にする効果的な手段を提供します。

以上がモバイル Web サイトで横向きを強制し、自動回転を無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。