CODEWITHSUNDEEP
ioscssmedia-queriesretina-display
dogeatcat
dogeatcat

Reputation: 41

ios7 media queries (retina background-size)

Apple new iOS7 operating system it's causing issues with retina media queries.

The image replacement works perfectly on iPhones 4, 4s, 5 running iOS6 and below (any browser). iOS7 browsers appear to grab the high-res image but ignore the background-size property.

I try with "(min-device-pixel-ratio: 2)" but don´t works because the app showed our non retina sprite ¿anyone have an idea to fix it?

@mixin sprite($x,$y, $spriteX: 32, $spriteY: 32, $imagePath: "sprites.png"){
  @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY);
  @media (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio: 2)
  {
      $imagePath: "spritesx2.png";
      background-size: 500px 1760px;
      @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY);
  }
}

Upvotes: 2

Views: 1225

Answers (1)

dogeatcat
dogeatcat

Reputation: 41

Thanks at all! I Fix it with "!important" tag in background-size 

@mixin sprite($x,$y, $spriteX: 32, $spriteY: 32, $imagePath: "sprites.png"){
  @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY);
  @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)
  {
      $imagePath: "spritesx2.png";
      background-size: 500px 1800px !important;
      @include spriteHelper($imagePath, $x, $y, $spriteX, $spriteY);
  }
}

Upvotes: 2

Related Questions