WebサイトのiPad対応化 - 「微ニ入ル」の場合
iPadとは
iPadはAppleから発売されている情報端末機器で、ネットに繋がっていればWebサイトの閲覧も出来るというモノである。
画面のサイズは9.7インチ、解像度は1024×768pixである。
▲これは1024x768pixのPCで表示した微ニ入ルトップ画面である。（便宜上、アドレスバー表示分などは無視。以下同じ）
これがiPadではどう表示されるのだろうか。
iPadを横置きした時の見え方
▲iPadも表示画面は幅1024pix、高さ768pixであるが、iPadは左右のマージン部分を省き、コンテンツ部分を拡大して表示する。
（塗りつぶし部分は、初期段階では見えずスクロールすることによって見える部分。）
▲同様に、横置きiPadによる「買う」のページ。量が多いのでスクロール部分も多くなっている。
iPadを縦置きした時の見え方
▲iPadを90°回転させ縦置きで「買う」ページを見た場合。1行の文字数は同じで画面幅が狭くなるので、横置きの時より文字が小さくなる。その代わり、スクロールをしなくてもコンテンツのほとんどが見えることになる。
▲ここからが重要。トップページも縦置き時はこのように文字が小さくなってレンダリング（描写）されるのかというと、そうではない。
▲下の方の空白を無くし画面の高さに合わせてコンテンツが拡大される。そして、横スクロールが発生してしまうのである。
iPadの問題点
以上で見たように、iPadでは「原稿量が少なくて、下に空白のあるページ」と「原稿量が多く、縦スクロールがあるページ」では文字の大きさ、画面のデザインが異なるという現象が生じる。
同じサイトの中でページを移る度に文字の大きさが変わったり横スクロールが発生しては不便である。これを避けるためには「原稿量が少ないページの原稿量を増やす」なり「冗長な書き方をする」なりの方法をとるか、または拡大関係の禁止をするしかないであろう。
微ニ入ルソウルのトップページがこの問題をどう解決しているか…。 下記で述べるようにbodyに幅と高さを指定（width:760px; height:1024px;）してやればよいようである。
参考
iPadを縦置きした時のみのスタイルを指定したい時は、スタイルシートに次のように書けばよい。
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
body /*←例*/
{
width:500px; /*←例*/
}
}
横置きした時のみのスタイル指定は、portraitの代わりにlandscapeである。
【追記】これよりも、JavaScriptを使ってiPad専用のスタイルシートを読み込ませる方法をオススメする。以下は2011年11月現在のJavaScript記述
//■■■ iPad用のスタイルシートを読ませる
if(navigator.platform.indexOf("iPad") != -1)
{
cssSrcipad = "<link rel='stylesheet' type='text/css' href='http://www.ysugiyama.com/vinyl/style/style-vinylipad.css'>";
document.write(cssSrcipad);
}
【追記】以下は2011年11月現在のipad専用cssの重要部分
html
{
}
body
{
max-width : none;
width : 760px;
height : 1024px; /*このようにheightまで指定すれば原稿量が少なくてもOK。*/
overflow : visible; /*原稿が溢れても読めるように。*/
border : none; /*溢れた場合対策。*/
background-color:transparent; /*溢れた場合対策。*/
background-image:none: /*溢れた場合対策。*/
}
[2011-05]
【参考】メインのcssでbodyに「max-width」を指定するとiPadでレイアウトが崩れる。max-widthについてはmax-widthの注意点 - iPadを参照。[2011-11]
