モバイル Web サイトで横向きを強制するにはどうすればよいですか?

モバイル サイト: 横向きのみの表示を強制する

モバイル Web サイトで自動回転を防止し、横向きのみを強制するにはどうすればよいですか?この問題は、「モバイル ファースト」アプローチでサイトを開発するときに生じます。

この問題に対処するには、メディア クエリを利用できます。次の CSS コード スニペットは実装を示しています。

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

提供されたコードでは、2 つの別個のスタイルシートが指定されています。

• style_l.css: このスタイルシートは、画面が表示されているときに適用されます。横向きで。これには、コンテンツを目的の横向きレイアウトで表示するために必要なスタイルが含まれています。
• style_p.css: このスタイルシートは、画面が縦向きの場合に適用されます。これを使用して、特定の要素を非表示または無効にしたり、アプリが横向きモード専用に設計されていることを示すメッセージを表示したりすることができます。

このアプローチを実装すると、モバイル サイトが横向きにロックされるようにすることができます。これにより、ユーザーが誤ってデバイスを回転させたり、インターフェイスが歪んだり使用不能になったりする可能性を防ぐことができます。

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