web-dev-qa-db-ja.com

iPadおよびiPhoneでのCSS背景画像のサイズ変更が正しくありません。

私のサイトの背景画像は、Chromeおよびbackground-size：coverを使用したSafariでうまくサイズ変更されていますが、ipadまたはiphoneでWebサイトをテストするとき、CSS背景画像は実際にズームインされ、これに関連する他の多くの質問をここで読みましたが、誰も私の問題を解決していません。

HTML

<div class="background"> 

</div><!--background-->

.backgroundにはコンテナがなく、画面の幅は100％です。

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
htmlioscss
22
chap

同じ問題がありました。FIXEDではなくSCROLLを使用しました。

background-attachment:scroll;
52
Etienne Dupuis

どうやら、iPadのSafariは ダウンサンプリング 1024pxのしきい値を超える画像です。 scrollの代わりにfixedを使用してみましたが、うまくいきませんでした。 その他のトリック も私には機能しませんでした。

I これを解決 私の元々大きすぎた1600×1600画像をtwo画像に分割することにより。そのため、2つの1024pxサイズの画像を使用でき、以前よりもさらに読みやすくなりました。

たぶんそのような回避策もあなたのために働くでしょう。

0
WoodrowShigeru