PCサイト、タブレット、スマホできれいに表示されるようにコーディングを行っています。 ｃｓｓで背景を指定したとき、iPadの横向きで見たときにだけ、背景画像が拡大表示されてしまいます。 #indexというdivに背景を指定するとします。cssは以下のように記述しています。 #index{ background: url(../images/index/bg_index.png) repeat-x center top; } /* devicePixelRatio=1.5以上*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #index{ background: url(../images/index/bg_index_b.png) ; /* 2倍サイズの画像 */ -webkit-background-size: 1100px 450px; /* WebKit */ background-size: 1100px 450px; /* WebKit以外 */ } } 通常の指定でPCに対応とタブレットに対応、@media only screen andでスマホの高解像度のものに対応で、指定しています。 この指定でタブレットを横向きにしたときも対応してくれるのかと思っていたのですが、拡大されてぼやけて表示されてしまいます。 HTML側のimgタグで指定している画像については、実際の表示サイズより２倍サイズの画像を使い、widthとheightで実際のサイズを指定しています。 imgタグの画像は、横向きにしたときも綺麗に表示されます。 iPadを横向きにしたときも背景画像が拡大されずに綺麗に表示される方法はないのでしょうか？ よろしくお願いします。
↧