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

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

サイトのキャプチャ

iPad CSS Layout with landscape / portrait orientation modes

デモ

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

デモのキャプチャ

デモページ

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

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

Landscapeモード(横向き)

サイトのキャプチャ

Landscapeモード(横向き)のグリッド設計

グリッド
1024=768+256
768=30+708+30
256=20+216+20

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;
   }
}

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

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

top of page

©2017 coliss