ios7 媒体查询（视网膜背景大小）答案

【问题标题】：ios7 media queries (retina background-size)ios7 媒体查询（视网膜背景大小）
【发布时间】：2013-09-28 17:37:15
【问题描述】：

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

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

我尝试使用“(min-device-pixel-ratio: 2)”，但无法正常工作，因为该应用显示了我们的非 Retina 精灵¿有人有解决它的想法吗？

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

【问题讨论】：

and 在有前缀和无前缀像素之间是奇数。不应该是：@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ... }？
@PaulRoub，绝对——css-tricks.com/snippets/css/retina-display-media-query

标签： ios css media-queries retina-display

【解决方案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);
  }
}

【讨论】：