5

Apple は新しい iOS7 オペレーティング システムをリリースしたばかりですが、Retina アイコンのメディア クエリで問題が発生しています。background-size プロパティが無視されているようです。サンプル画像はこちら: http://imgur.com/R3OgFgN

画像の置換は、iOS6 以下 (任意のブラウザー) を実行している iPhone 4、4s、5 で完全に機能します。iOS7 ブラウザーは、高解像度の画像を取得しているように見えますが、background-size プロパティを無視しています。

@media (-webkit-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
}

それがすること;

  • 元の画像を @2x 画像に置き換えます

それがしないこと;

  • 背景画像を div 要素のサイズに合わせます。

iOS7 Safari & Chrome でテスト済み。

誰かがこの問題を抱えていましたか?もしそうなら、どうやってそれを修正しましたか?

4

3 に答える 3

10

解決しました！iOS7は、メディア クエリの実行時にbackground-size プロパティをリセットします。トリックは、正確なピクセル寸法、またはそのような 100% 値で background-size を指定することです。

@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){
        .logo{
          background: url(../img/2x/logo@2x.png) no-repeat 0 0 !important;
          background-size: 100% !important;
          width: 30px;
          height: 40px;
        }

Nb - また、!importantタグを含めることで、Samsung S3 & S4 を含むすべての Retina デバイスがクエリを適切に読み取ることができることもわかりました。楽しみ。

于 2013-09-24T05:45:15.610 に答える
7

これはバグのある動作ではありません。これはあなたのせいです。ここですべての背景プロパティを設定します。

background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;

したがって、ブラウザはこれを次のように扱います

background-image:url(../img/2x/m-yellloh-logo@2x.png) !important 
background-position:0 0 !important 
background-repeat:no-repeat !important 
background-size:auto auto !important 
and so on

したがって、最後の行background-size: 100%;はによってオーバーライドされますbackground-size:auto auto !important;

于 2013-10-06T18:25:10.380 に答える
2

作例はイメージなので。コードを検査できません。

次のオプションを試すことができます。

  1. div の幅と高さが固定されている場合。固定の幅と高さを画像に設定できます。また、通常、Retina ディスプレイには、高解像度ディスプレイ用の「min-device-pixel-ratio」が必要です。

例えば

@media (-webkit-min-device-pixel-ratio: 2) 
       and (min-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;
  width: 200px;
  height: 100px;
}

またはdivが固定されていない場合。

@media (-webkit-min-device-pixel-ratio: 2) 
       and (min-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/m-yellloh-logo@2x.png) no-repeat 0 0 !important;
  background-size: contain;
}

これで問題が解決するかどうか試してください。

乾杯！

于 2013-09-23T01:13:29.733 に答える