13

iOS7 の Safari に問題があります。問題は、iOS7 の Safari と background-size で retina 用のスプライト画像を使用することです (そう思います)。iOS7 の Chrome では問題なく動作しますが、Safari では動作しません。使用中のコードは次のとおりです。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {

    footer ul.social li a { background-size: 48px 144px; }
    footer ul.social li a.fb { background: url(../images/socialx2.png) 0 0 no-repeat; }
    footer ul.social li a.in { background: url(../images/socialx2.png) 0 -48px no-repeat; }
    footer ul.social li a.tw { background: url(../images/socialx2.png) 0 -96px no-repeat; }

}

これは、IOS7 の Safari でどのように見えるかのイメージです。

画面キャプチャ

4

1 に答える 1

22

safari / iOS7 では、background プロパティを使用すると background-size がリセットされます。background の後に background-property を指定する必要があります。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
    footer ul.social li a.fb { background: url(../images/socialx2.png) 0 0 no-repeat; background-size: 48px 144px; }
    footer ul.social li a.in { background: url(../images/socialx2.png) 0 -48px no-repeat; background-size: 48px 144px; }
    footer ul.social li a.tw { background: url(../images/socialx2.png) 0 -96px no-repeat; background-size: 48px 144px; }
}
于 2013-09-20T13:05:22.170 に答える