iOS7忽略了视网膜CSS媒体查询 - 背景大小

Question

苹果刚刚发布了他们的新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/[e-mail]) no-repeat 0 0 !important;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  background-size: 100%;
}

功能：

• 替换原始图像为@2x图像。

不具备的功能：

• 使背景图片适应div元素大小。

在iOS7 Safari和Chrome上进行了测试。

有人遇到过这个问题吗？如果是，您是如何解决的？

- andycrone

Answer 1

我解决了！原来是因为在运行媒体查询时，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/[e-mail]) no-repeat 0 0 !important;
          background-size: 100% !important;
          width: 30px;
          height: 40px;
        }

注意 - 我还发现包含 !important 标签可以确保所有的视网膜设备正确读取查询，包括三星S3和S4。享受吧。

- andycrone

Answer 2

这不是错误行为，而是你的责任。你在这里设置了所有的背景属性：

background: url(../img/2x/[e-mail]) no-repeat 0 0 !important;

浏览器将其视为这样处理

background-image:url(../img/2x/[e-mail]) !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;覆盖。

- ZavtraMen

---

你说得完全正确。有很多CSS冲突，但我希望这可以帮助其他人解决类似的问题 ;) - andycrone

这不是完整的解决方案，但非常感谢因为它帮助我解决了我的问题！编写一般的“background:;”属性根本不起作用，但只要我像“background-image”，“background-position”，“background-size”一样写每个属性，它就起作用了！ - Ludovic

Answer 3

由于示例是一张图片，我无法检查代码。

您可以尝试以下选项：

1. 如果div的宽度和高度是固定的。您可以为图像设置固定的宽度和高度。通常，视网膜显示需要“min-device-pixel-ratio”来实现高分辨率显示。

例如：

@media (-webkit-min-device-pixel-ratio: 2) 
       and (min-device-pixel-ratio: 2){
.b .logo{
  background: url(../img/2x/[e-mail]) 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/[e-mail]) no-repeat 0 0 !important;
  background-size: contain;
}

尝试使用此方法解决您的问题。

祝好运！

- joydesigner

---

你的媒体查询包括'min-device-pixel-ratio'没有起作用，但是我通过在两个查询之间加逗号来修复它。在两种情况下仍然无法识别background-size属性。我会继续尝试解决这个问题，并告诉你我的进展。 - andycrone

如果背景大小是固定的，您可以将背景大小设置为固定宽度，例如 'background-size: 200px'。 - joydesigner