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

Question

Apple 刚刚发布了他们的新 iOS7 操作系统，但它导致我的视​​网膜图标媒体查询出现问题。似乎 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 上测试。

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

Answer 1

我解决了！结果是，iOS7 在运行媒体查询时会重置背景大小属性。诀窍是使用精确的像素尺寸或像这样的 100% 值指定背景大小；

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

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

Answer 2

这不是错误的行为。这是你的错。 您在此处设置所有背景属性：

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; 覆盖

Answer 3

因为示例是图像。我无法检查代码。

您可以尝试以下选项：

1. 如果 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;
  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;
}

试试这是否可以解决您的问题。

干杯！