jQueryMobileでiPad向けの2カラムのWebページをデザインする その３

さて、2カラムのデザイン部分だけ作りましたが、横向きだけの実装になっています。
そこで、今回は横向きと縦向きの表示を変えてみたいと思います。
とは言うもの、MediaQuery？MediaQueries？で出来ますので、CSSだけを編集しましょう。

• sample.css

div.ipad-grid {
    height: 100%;
}

div.ipad-grid div.ipad-menu-block {
    border: solid 1px #666666;
    border-right: none;
    border-radius: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.ipad-grid div.ipad-menu-block header.ipad-menu-header {
	position: fixed;
	top: 0;
    border: solid 0px 1px 0px 0px #666666;
    border-radius: 5px 5px 0px 0px;
    z-index: 5;
}

div.ipad-grid div.ipad-menu-block div.ipad-menu-body {
    padding-top: 56px;
}

div.ipad-grid div.ipad-menu-block div.ipad-menu-body ul li {
	margin-left: 0px;
	margin-right: 0px;
}

div.ipad-grid div.ipad-content-block {
    border: solid 1px #666666;
    border-radius: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.ipad-grid div.ipad-content-block header.ipad-content-header {
    position: fixed;
    top: 0;
    border: solid 0px 1px 0px 0px #666666;
    border-radius: 5px 5px 0px 0px;
    z-index: 5;
}

div.ipad-grid div.ipad-content-block div.ipad-content-body {
    padding-top: 56px;
}

div.ipad-grid div.ipad-content-block div.ipad-content-body ul li {
    margin-left: 0px;
    margin-right: 0px;
}

@media screen and (min-width: 900px) and (max-width: 1200px) {
    div.ipad-grid div.ipad-menu-block {
        width: 301px;
        height: 672px;
    }
    div.ipad-grid div.ipad-menu-block header.ipad-menu-header {
        width: 300px;
    }
    div.ipad-grid div.ipad-content-block {
        width: 723px;
        height: 672px;
    }
    div.ipad-grid div.ipad-content-block header.ipad-content-header {
        width: 722px;
    }
}

@media screen and (min-width: 600px) and (max-width: 900px) {
    div.ipad-grid div.ipad-menu-block {
        width: 301px;
        height: 928px;
    }
    div.ipad-grid div.ipad-menu-block header.ipad-menu-header {
        width: 300px;
    }
    div.ipad-grid div.ipad-menu-block header.ipad-menu-header ul {
        width: 300px;
    }    
    div.ipad-grid div.ipad-content-block {
        width: 467px;
        height: 928px;
    }
    div.ipad-grid div.ipad-content-block header.ipad-content-header {
        width: 466px;
    }
}

横向きと縦向きでサイズに関わる部分を抜き出して変更していきます。Queryの指定方法がこれで合ってるかわからないのですが・・・。iPad2で見ていますが、新しいiPadでは崩れる可能性があります。あとでちゃんと調べないといけないですね。
iPadの設定アプリでは、横向きでも縦向きでもメニューのサイズは変わりません。なので、本来はコンテンツ部分だけで良いのですが、他のアプリでそうとは限らないので、今回はメニュー部分も抽出しています。