iPadを買って初めて自分のサイトを覗いた時の衝撃と言ったらw
まず、背景画像の小さいこと。
理由はまったくわからんのだけど、見た目として背景画像の解像度がコンテンツの解像度と合ってない・・・
そして画像からはわかりにくいけども、CSSによる背景固定が効いてない
iOS5からHTML5対応になって position: fixed には対応したみたいけど、body の background-attachment: fixed にはどうも対応してないようで、背景が一緒にスクロールされる状態。
まさかiPadでCSS再構成することになろうとはwww
で、解決策
背景の解像度
残念ながら理由はわからんのだけども、JPGをPNGにしたら直ったwww(GIFも大丈夫だったよ)
なぜなんだろう。なんかJPGに対しては特別な処理でもしてるんかな?
背景固定
HTML5には対応してるから、まずは宣言とタグを変更してある程度HTML5準拠に。
で、背景用の div を追加する。
【HTML】
<div id="background"></div>
それを position: fixed にして z-index を下げて background をつける。
【CSS】
#background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url(body.png); background-repeat: no-repeat; background-attachment: fixed; z-index: -1; }
なんでこんな裏技的なことしなきゃいけないんだって感じだけど、まぁとりあえず思い通りの表示になったからよしとするww
すごい!!
助かりましたm(_ _)m
お役に立てたならよかったです♪
早いトコ対応してくれればこんな裏技ちっくにやらなくて済むんですけどねぇw