iPadでportraitとlandscapeでCSSを切り替える方法
みなさん、こんにちは、まーしーです
明日は日本でiPadが発売されますね。これでどう変わるのか楽しみやら色々な気持ちが混じり合っていますね。
さて、そんなiPadですが、iPad用にサイトを作る場合があるかも知れません。iPhoneと異なりサイズがそれなりにあるので、PCに近い形で作れそうですが細かい微調整をしたいときはCSSのみで対応出来そうです。
portraitとlandscapeで幅が異なるのでレイアウトを若干調整することが考えられます。リキッドレイアウトにしてしまうのも1つの手でしょう。あとはorientaitonを使ってportraitとlandscapeそれぞれサイズを指定しまってもいいでしょう。
読み込むCSSを切り替える
portraitとlandscapeで読み込むCSSを切り替える方法があります
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
このあたりはPCのブラウザでみてもブラウザサイズを元に切り替わります。
CSS内で変更する
読み込むCSSを切り替えるのと同じようなことを１つのCSSで書く方法もあります。
@media all and (orientation:landscape){
#mainArea{
width:900px;
}
}
このように書けばlandscapeの時だけスタイルが適用されます。
倍率を指定してしまう
ただ、このようにしてpx指定した場合不要な余白が生まれたりする場合があります。iPadが980px想定で表示させるので、そうならないようにviewportで表示を調整します。
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0"/>
その他メモ
hilokiさんの記事を読めば万事ＯＫ
landscapeとportraitの話しか書きませんでしたが、他についてはhilokiさんの記事をよめば概ね解決するでしょう。
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
http://designblog.ecstudio.jp/htmlcss/ipad-lets-begin-optimize.html
iPadなどでブックマークアイコンを指定する
iPadでブックマークをHOMEにおく場合は「apple-touch-icon.png」というファイル名でサイトのルートに画像をアップすると自動でこのアイコンを使ってくれます。
72px × 72pxで作成すればよいでしょう。
