iOS 7 媒体查询(视网膜背景大小)

Question

苹果新iOS7操作系统 它导致视网膜媒体查询出现问题。

图像替换在运行iOS6及更低版本的iPhone 4,4s，5（任何浏览器）上完美运行。 iOS7 浏览器似乎抓取高分辨率图像，但忽略了背景大小属性。

我尝试使用"（最小设备像素比：2）"但不起作用，因为该应用程序显示了我们的非视网膜精灵 ¿有人有修复它的想法吗？

@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);
  }
}

Answer 1

谢谢！我用背景大小的"！important"标签修复它

@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);
  }
}