Question

Apple刚刚发布了他们的新iOS7操作系统，但它引起了我的视网膜图标媒体查询问题。看来background-size属性被忽略了。示例图片位于：http://imgur.com/R3OgFgN

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

@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＆amp;上测试铬。

有没有人遇到过这个问题，如果有的话，你是怎么设法解决的？

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 标签确保所有视网膜设备都能正确读取查询，包括Samsung S3＆amp; 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

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

您可以尝试以下选项：

如果div的宽度和高度是固定的。您可以为图像设置固定的宽度和高度。通常，视网膜显示器需要“最小设备像素比”用于高分辨率显示器。

e.g。

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

尝试这可以解决您的问题。

干杯！

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

3 个答案: