4

私が取り組んでいるウェブサイトはここで見ることができます。iPad 3 または iPhone 4 の「About」または「Contact」セクションを確認すると、背景がすべて狂ったようにピクセル化されているように見えます。

background-sizeユーザーがサイズを変更すると適切にスケーリングされるように設定しましたが、coveriPad または iPhone ではひどく見えます。

デバイスでこれを修正する方法に関するヘルプやヒントはあります@media only screen and (min-device-pixel-ratio: 2)か?

ありがとうございました。

4

2 に答える 2

12

それはあなたが使用しているためですbackground-attachment:fixed- 何らかの理由でこれbackground-size: coverを iOS で使用すると、この動作が発生します。( http://jag.isで同じバグがあり、今日解決しました)。

したがって、次を追加すると解決するはずです。

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

プロパティはiOS用でもあります。これは、iOS用のプロパティを-webkit-background-size認識しないためです。coverbackground-size

これが私の解決策を見つけた記事です。

ところで素敵なサイトデザイン。

于 2012-09-20T02:01:21.077 に答える
2

IOS用の高解像度画像を作成するときは、すでに実行しているように見える高解像度メディアクエリを使用する必要があります。また、画像は2倍の大きさにしてから、網膜が高くなるように50％に縮小する必要があります。 

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
            #header { background: url(headerRatio2.png); background-size: 50%; }
        }

この方法は機能するはずです。機能しない場合は、適切なメタタグがあることを確認し、コードを再確認してください。

于 2012-07-22T19:53:34.390 に答える