[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート

iPadの「Landscapeモード（横向き）」と「Portraitモード（縦向き）」で異なるレイアウトを提供するスタイルシートを紹介します。

iPad CSS Layout with landscape / portrait orientation modes

[ad#ad-2]

• デモ
• 横向きと縦向きで使えるグリッド設計
• 実装のポイント

デモ

デモでは、横向きは2カラムで、縦向きは1カラムでサイドバーのコンテンツが下に移動します。

デモページ

横向きと縦向きで使えるグリッド設計

iPadの1024×768ピクセルを活かしたグリッド設計になっています。

Landscapeモード（横向き）

Landscapeモード（横向き）のグリッド設計

グリッド

1024=768+256

768=30+708+30

256=20+216+20

[ad#ad-2]

Portraitモード（縦向き）

Portraitモード（縦向き）のグリッド設計

グリッド

768=30+708+30

708=216+30+216+30+216

実装のポイント

iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。

METAタグ

iPadのスクリーンで等倍に表示されるように、METAタグで設定します。

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

スタイルシート

比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。

/* Landscapeモード（横向き）用 */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* Portraitモード（縦向き）用 */
   #wrap {
      width:768px;
   }
}

あとは、横向き用と縦向き用のスタイルシートをそれぞれ記述します。

サイトではグリッドの分のスタイルシートを含めたデモファイルが一式でダウンロードできます。